I have 2 objects in my project: a company and an user. I have a form where the user can update his profile. One of the things he can update is the country. Now to show the countries I use a dropdown list.
I want to set the selected attribute in the option where the name of the country is equal to the actual country of the user. (country.name==user.country)
This is what I have tried but It doesn't seem to work.
<select>
<option *ngFor="#c of countries" [ngStyle]="setStyles()" [ngValue]="c">{{c.name}}</option>
</select>
setStyles(){
let styles;
if (this.companies[i].name == this.user.country ) {
styles = {
'selected'
}
return styles;
}
I would try the following:
<select>
<option *ngFor="#c of countries"
[attr.selected]="c.name == user.country ? true : null"
[ngValue]="c">
{{c.name}}
</option>
</select>
I think that it's an attribute you need and not a style.
Related
I have two MUI Select elements. After the user makes a selection on the first, I'd like the second to automatically get activated.
Here's the pseudo-code:
<Select native value={region} onChange={selectRegion()}>
{regions.map((r,i) => <option value={r.value} key={`${r.value}-${r.index}`}>)
</Select>
<Select multiple value={zone}>
{zones.map((z,i) => <option value={z.value} key={`${z.value}-${z.index}`}>)
</Select>
...
const selectRegion(e) => {
setRegion(e.target.value)
let z = getZones(e.target.value)
setZones(z)
// This is where I want to focus on the Zone input
}
Can you add a ref to the select component?
const selectRef = useRef(null)
<Select inputRef={selectRef} multiple value={zone}>
{zones.map((z,i) => <option value={z.value} key={`${z.value}-${z.index}`}>)
</Select>
const selectRegion(e) => {
setRegion(e.target.value)
let z = getZones(e.target.value)
setZones(z)
// This is where I want to focus on the Zone input
selectRef.current.focus()
}
HTML
<div class="options-container">
<select id="all-options">
<option value="0" selected>NY</option>
<option value="1">LA</option>
<option value="2">Toronto</option>
<option value="3">Paris</option>
</select>
</div>
JS
let selectedOption = {};
let allOptions = document.getElementById('all-options');
let optionValue = allOptions.options[all-options.selectedIndex].value;
if (optionValue == "0") {
selectedOption.value === "0"
} else if (optionValue === "1") {
selectedOption.value === "1"
} else if (optionValue === "2") {
selectedOption.value === "2"
} else if (optionValue === "3") {
selectedOption.value === "3"
};
I'm attempting to target the current value of an option list element in my HTML file using JS so that I can add that value to the selectedOption object. The value can be added either as a string or number object.
Defining the Event Listener
You're going to want to define an event listener in your <select>. For example:
function onSelectItem(evt)
{
let value = evt.target.selectedOptions[0].value;
let text = evt.target.selectedOptions[0].text;
// Assign it how you want here:
selectedOption = value;
}
You can't really "push" to an object. If you meant an array, change the selected option to an array ([]) and do selectedOption.push(value). If you want a useful object, however, you could just assign it to evt.target.selectedOptions[0].
Attaching the Listener
After that, you can attach it in html, and pass the event object via the default event variable:
<select id="all-options" onchange="onSelectItem(event)">
<option value="0">NY</option>
<option value="1">LA</option>
<option value="2">Toronto</option>
<option value="3">Paris</option>
</select>
or more Javascript when the page loads (by setting the onload attribute to "init()" in <body>):
function init()
{
let menu = document.getElementById('all-options');
menu.addEventListener('change', onSelectItem);
// Since it seems that you also want a default selected value when the
// page loads, you should probably also initialize your `selectedOption` to `0`.
selectedOption = menu.selectedOptions[0].value;
}
I am trying to reset options value when clicked on button. I was unable to find any solution. I have a component where I am using this code:
<select class='select-option' required [(ngModel)]='optionSelected' (ngModelChange)="toNumber()">
<option [ngValue]="undefined" disabled selected> Please select one option </option>
<option *ngFor='let option of options' [ngValue]="option">{{option}}</option>
</select>
Inside my class I am using this code:
options = ["Bar", "Pie", "Area"];
To call options inside a loop. I am using this code on button event:
appendToContainer(){
// logic
this.options == null
}
What should I do to make it default or null
Your logic is correct, but implementation is wrong:
appendToContainer(){
// logic
this.options == null; // ==> WRONG expression
this.options = []; // ==> CORRECT
}
Try this:
appendToContainer(){
// logic
this.options.value == this.options.options.first;//if the first options is 'Select'
}
I want to create setting page in my ionic app
HTML :
<select class="selectCountry">
<option value="fr">France</option>
<option value="usa">USA</option>
</select>
Controler.js
angular.module('starter.controllers', ['ionic', 'ngStorage'])
.controller('SettingsCtrl',function($scope, $localStorage){
// what to do to save and data from <select> & use if condition
});
you can put ng-model on the select and trigger onchange function
<select class="selectCountry" ng-model="selectCountry" ng-change="save()">
<option value="fr">France</option>
<option value="usa">USA</option>
</select>
and in the controller
angular.module('starter.controllers', ['ionic', 'ngStorage'])
.controller('SettingsCtrl',function($scope, $localStorage){
// what to do to save and data from <select> & use if condition
$scope.save = function(){
$localStorage.selectCountry= $scope.selectCountry; // set
alert($localStorage.selectCountry); // get
}
$localStorage.selectCountry = $localStorage.selectCountry; // get
});
Check the docs for it NgStorage
i created this pen Here
.service('storage', function() {
var myjsonObj = "nothing";//the object to hold our data
return {
setJson:function(name, item){
window.localStorage.setItem( name, item );
},
getJson:function(name){
return window.localStorage.getItem( name );
}
}
})
if you wanna store and retrieve the variable.
storage.setJson("nameOfSetting", "theVariableYouWannaStore");
var theVariableYouStored = storage.getJson("nameOfSetting");
I m using jQuery 1.7+ latest .on method, but failed to implements, please help me.
working Fiddle.
basically here is my
HTML
<ul id="sortByRight" >
<li id="1">List</li>
<li id="2">Photo</li>
<li id="3">Map</li>
</ul>
<select name="sort" id="sort" >
<option value="1">Recommended</option>
<option value="2">Price: low to high</option>
<option value="3">Price: high to low </option>
<option value="4">Newest</option>
</select>
jQuery code
$(document).on('change click', 'ul#sortByRight,select#sort', function() {
selectedOption = $('select#sort').val();
whatToShow = $(this).attr('id');
alert('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);
}
);
now I havebelow problems/queries.
can we bind one event with one selector i.e. above function should be called
EITHER on change of selectbox OR on click of ul.
how to set data argument in .on method. I have tried like below
$(document).on('change click', 'ul#sortByRight,select#sort',
{ selectedOption : $('select#sort').val(), whatToShow : $(this).attr('id') } ,
function(){console.log('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);}
);
but get an error that selectedOption is not defined.
can we write something like this $(this, li); because I need the id of li not the id of selectbox.
if there is any other optimized solution ( using function like live or bind ), then please tell me.
Thanks A Lot.
I'm not 100% clear on what you actually want to do, but one thing doesn't make much sense. You want to send the ID of the LI when the select box is changed. Which LI? The last LI clicked? You need to store the state of the active LI so that you can send it in the ajax request if the select box is changed.
Perhaps something like this:
$('select#sort').change(function() {
processAjax();
});
$('ul#sortByRight > li > a').click(function() {
$(this).closest('ul').find('li').removeClass('active');
$(this).closest('li').addClass('active');
processAjax();
});
function processAjax() {
selectedOption = $('select#sort').val();
whatToShow = $('ul#sortByRight').find('.active').attr('id');
alert('selectedOption:' + selectedOption + 'whatToShow:' + whatToShow);
}
or check out the jsFiddle