Ok, I'm sure this one is super simple, though it's evading me.
I have a very simple dropdown select menu - as shown below - with predefined options.
I am setting the $scope.qty in my controller and it correctly selects the appropriate <option>
However, in my controller, on a save() function, when I get the value of $scope.qty i get the original value, that i set earlier, and not the newly selected on.
What I am missing to bind my selected option to the model?
<select ng-model="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
In my controller, I set the qty
$scope.qty = 4;
When I change my select, to say 2, $scope.qty still equals 4.
You can simply create the array in ng-options:
<select ng-options="nr for nr in [1,2,3,4]" ng-model="qty"></select>
Although the way you did it should usually work too. ng-options is not required for ng-model to work. It's the other way around.
AngularJS 1.3 only allows for a single option element that can be used for the null value (aka, not selected).
You need to use the ngOptions convention.
Here's the documentation that explains this:
https://docs.angularjs.org/api/ng/directive/select
Related
Using Angular Chosen
https://github.com/localytics/angular-chosen
and testing out the following example
<select multiple
chosen
ng-model="state"
ng-options="s.name for s in states">
<option value=""></option>
</select>
However, I'm wondering as to how one would bind just the name value for a state object to ng-model?
The options presented will display just the state names, but when chosen, the entire state object is bound to ng-model rather than just the selected name.
Any thoughts would be much appreictaed as always!
You can try this format
select as label for value in array
eg. s.name as s.name for s in states
I am trying to make an Asp.Net Mvc Ajax project.I have to take the value of select-option in a loop with jquery.All select's ids are same , names are same when I try it takes the first select's value.btw I have tried all things in this title: jQuery Get Selected Option From Dropdown. Can you help me please?
#foreach (var item in Model)
{
<select id="selSaat">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
}
Heres some JS code that will give you the selections value if there is only 1 select element on your page and the options within it contain values on them:
document.getElementsByTagName('select')[0].onchange = function(){
alert(this.value);
};
Heres a working demo for ya:
http://codepen.io/nicholasabrams/pen/OVOPYK
Targeting a <select> with native browser javascript with the onchange method will return the value selected when it occurs via user interaction.
http://www.w3schools.com/jsref/event_onchange.asp
I have a select element with multiple optgroups, where it is possible for options in different optgroups to have the same value. For example (see the 'Apple' and 'Potato' options):
<select data-placeholder="Fruit/Veg" id="food_select">
<option value=""></option>
<optgroup label="Fruits">
<option data-params="{'selected_type':'Fruit'}" value="1">Apple</option>
<option data-params="{'selected_type':'Fruit'}" value="2">Pear</option>
<option data-params="{'selected_type':'Fruit'}" value="3">Banana</option>
</optgroup>
<optgroup label="Veg">
<option data-params="{'selected_type':'Veg'}" value="1">Potato</option>
<option data-params="{'selected_type':'Veg'}" value="4">Cabbage</option>
<option data-params="{'selected_type':'Veg'}" value="5">Bean</option>
</optgroup>
</select>
With a plain select, attempting to find the selected option with jQuery yields the correct result.
$('#food_select').find(:selected)
However, when select2 is applied, and 'Potato' is selected, $('#food_select').find(:selected) returns the 'Apple' option, which is the first option with the value of '1'.
All other selected options work correctly, so it seems select2 is not handling the duplicate values correctly. I've created a JSFiddle demonstrating this behaviour, at: http://jsfiddle.net/e57m9cax/.
Is there a workaround or fix for this behaviour?
I could split this into two separate select elements, but would rather not for UX reasons. Any direction would be appreciated.
Thanks.
From Kevin Brown, a collaborator on select2:
This is a known issue and because of how the internals are structured for 3.5, it cannot be fixed in the 3.x released.
Luckily it's fixed in 4.0, which will be entering into the first beta shortly
So the solution to this is to use separate selects until the release of select2 4.0.
http://jsfiddle.net/E2AMX/ has the exact demonstration of the problem, which is:
I have multiple select boxes on the same page. All the options of the selectboxes are in the given form:
<option value="#id_num">StringVal</option>
and i have one observableArray (say idlist) of id_nums with no separation regarding selectboxes. For example,
idlist = ko.observableArray([1,2,3,4]);
and the selectboxes are as
<select name="first" data-bind="selectedOptions: idlist">
...
<option value="2">Blah</option>
<option value="3">Blah</option>
...
</select>
<select name="second" data-bind="selectedOptions: idlist">
...
<option value="1">Blah</option>
...
</select>
<select name="third" data-bind="selectedOptions: idlist">
...
<option value="4">Blah</option>
...
</select>
My problem is: when i select one option from a selectbox, other selectboxes return to their initial states. This is directly related to selectedOptions, for if i remove the selectedOptions directive, this problem does not occur.
Any suggestions will be very welcomed.
Thanks.
The selectedOptions binding is meant to be used on a single <select> tag with multi-select enabled. It will keep an array of each item in the options box selected.
The reason you are seeing the behavior you are is because when you you select a single value from one of the drop downs, the selectedOptions binding immediately fires. The logic goes something like this:
Update on target <select> fires.
Binding extracts the value from <option> and updates the underlying observable array.
Observable array fires update since values have changed.
Secondary drop downs respond to update, and update their selected value based on what is in the array.
Since no value exists in the set of <option> tags, the value is cleared.
This is why you are seeing this behavior. If you want to collect a composite from all selected options, then you will either need to write a new custom binding, or create a seperate array for each <select> you want to bind to.
HTML
<select id="selectDepartment">
<option value="1">120</option>
<option value="2">20</option>
<option value="3">140</option>
<option value="4">4120</option>
<option value="5">560</option>
<option value="6">451</option>
<option value="7">310</option>
<option value="8">656</option>
<option value="9">444</option>
<option value="10">555</option>
<option value="11">2560</option>
<option value="12">450</option>
</select>
jQuery
$("#selectDepartment").change( function() {
alert($("select option:selected").val());
});
the above function always shows value 1 on alert, when I select any one of the options
Your method of finding the selection option is vague. You're saying "Grab all <select>s". You then go on to grab the :selected option from each of them (of all <select>s on the page). Continued, .val() takes the first value off the top.
Simply put, you're always fetching the selected value of the first <select> found on the page. Assuming #selectDepartment isn't the first <select>, your value will never change.
Try to keep the scope to within the current <Select> using this:
$('#selectDepartment').change(function(){
var selopt = $('option:selected',this);
});
Note that I specify the scope to within the <select> that triggered the .change(). Also note this really isn't necessary as val() works just as easily:
var selopt = $(this).val();
Let jQuery do the heavy lifting. You really only need option:selected if you want control over styling that specific element, or you're working with a multi-select and want more control.
You can do something like this:
$("#selectDepartment").change( function() {
var selected = $(this).find(":selected");
});