Develop Reference

See which option was just selected in a multiselect

I have a multiselect bootstrap picker and would like to find the specific option that was just selected. For example, if I have the picker set to something like this:
<select class="form-select selectpicker" multiple aria-label="Default example">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
When the user selects their first option, "Cherry", I would like to alert("Cherry"). When the user then selects their second option, "Apple", I would like to alert("Apple").
I have tried to use the option:selected:last value, but this only works to display the last option in the array of selected option. I would like to display the option that was most recently selected, regardless of its place in the array of selected options. Any insight is greatly appreciated.
EDIT: This questions was closed due to being marked as similar to the question found here: Get selected value in dropdown list using JavaScript
After looking through all of the provided answers in that link, I am not convinced that the questions are the same. I would like to get the most recently selected text in a multiselect picker, not the only selected option in a single select. So, if a user has both Apple and Papaya options selected, but selected the Apple option after selecting the Papaya option, I would like to alert("Apple"). Thanks.

Here Are Two Methods By which you can Use Alert.
First Method: With OnChange
<select class="form-select selectpicker" multiple aria-label="Default example" onchange = "alert(this.value)">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
Second Method: Involves An Event Listener But Its Doing The Same Thing(Javascript)(Assuming That The ID of The Select Tag is selector
function change(){
alert(this.value)
}
document.getElementByID("selector").addEventListener("onchange",change)

dropdown and textarea binding with AngularJS

I have a very simple scenario and I wanted to use AngularJS for that. I am not able to get this one right.
I am retrieving data from database and directly writing it into the view inside dropdown. From their based on which item is selected, I want to populate the value into textbook.
So my code for it is as follows:
<select>
<option selected="selected" disabled="disabled">dropdown</option>
#foreach (System.Data.DataRow row in ViewBag.Template.Rows)
{
<option value="#row[1].ToString()">#row[0].ToString()</option>
}
</select>
<textarea></textarea>
I am trying to achieve following:
whatever option user select, the corresponding value for the item be populated into text area.
Please suggest how can I achieve using AngularJS.

You should use ngModel directive for that, the same for both select and textarea:
<select ng-model="selectModel">
<option selected="selected" disabled="disabled">dropdown</option>
#foreach (System.Data.DataRow row in ViewBag.Template.Rows)
{
<option value="#row[1].ToString()">#row[0].ToString()</option>
}
</select>
<textarea ng-model="selectModel"></textarea>
Demo: http://plnkr.co/edit/XOs6wUyqdr3ZlFtBq3RB?p=preview

multiselect dropdown sorts based on value present in option tag

I am having a multiselect dropdown whose value are populated based on iteration through for each. However the order I am sending the data is not maintained.
Please suggest what should I do.
<select id="secWhse" path="secondaryWarehouse" multiple="true" style="display: none;"
title="Select the secondary warehouse to which you want to give access to the user.">
<option value="1">Enterprise</option>
<option value="14">enter2</option>
<option value="17">enter3</option>
<option value="19">4thenterprise</option>
</select>
But if I am able to print the value directly, Its printing in my order.
UPDATE: Plugin we are using is: http://wenzhixin.net.cn/p/multiple-select/docs/#multiple-select
CODE:
$('#secWhse').multipleSelect({ filter: true,multiple: true});
JSP code to populate select tag:
${item.value}

Modify selected property in select option

I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!

You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>

I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);

How initialize dropdown (<select/>) with preselected value and then change it?

I've got a grid with dropdown in every row and I need to render it's state from DB.
So I've got dropdowns defined like that with selected option specified for preselecting the value from DB.
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>​
The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don't move and stays where it was.
So when I then call $("#selectId").val() I get the old one value.
What's the appropriate way to initialize dropdown control and then have an ability to freely change it's value in browser or by jQuery?

This seems to be working fine (Firefox on Ubuntu):
HTML
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
JS
$('#selectId').change(function() {
var opt = $(this).find('option:selected');
console.log([opt.val(), opt.text()]);
});
var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');
If you select the options, you'll see that it will print the changed version. Working example:
http://jsfiddle.net/vm4Q8/
Hope this helps.

It should work fine. May be you are not setting it correctly.
You should pass the value of the option to val() method to select it.
E.g $('#selectId').val('1'); will set first option as selected and afterwards calling $('#selectId').val() will give you 1 and not 2.
Here is the working example http://jsfiddle.net/3eu85/

You can get the val of the option selected, instead of the select
$('select#selectId option:selected').val();
Docs: http://api.jquery.com/val/

Which browser are you trying this in? Your code looks fine to me, and appears to be working in this jsFiddle.

please use this code instead,
$('#selectId option:selected').val();