We Keep Coding

JQuery get the value of the newly selected/unselected element of a select [duplicate]

I have a HTML select list, which can have multiple selects:
<select id="mySelect" name="myList" multiple="multiple" size="3">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option> `
<option value="4">Fourth</option>
...
</select>
I want to get an option's text everytime i choose it. I use jQuery to do this:
$('#mySelect').change(function() {
alert($('#mySelect option:selected').text());
});
Looks simple enough, however if select list has already some selected options - it will return their text too. As example, if i had already selected the "Second" option, after choosing "Fourth" one, alert would bring me this - "SecondFourth". So is there any short, simple way with jQuery to get only the "current" selected option's text or do i have to play with strings and filter new text?

You could do something like this, keeping the old value array and checking which new one isn't in there, like this:
var val;
$('#mySelect').change(function() {
var newVal = $(this).val();
for(var i=0; i<newVal.length; i++) {
if($.inArray(newVal[i], val) == -1)
alert($(this).find('option[value="' + newVal[i] + '"]').text());
}
val = newVal;
}); ​
Give it a try here, When you call .val() on a <select multiple> it returns an array of the values of its selected <option> elements. We're simply storing that, and when the selection changes, looping through the new values, if the new value was in the old value array ($.inArray(val, arr) == -1 if not found) then that's the new value. After that we're just using an attribute-equals selector to grab the element and get its .text().
If the value="" may contains quotes or other special characters that would interfere with the selector, use .filter() instead, like this:
$(this).children().filter(function() {
return this.value == newVal[i];
}).text());

Set a onClick on the option instead of the select:
$('#mySelect option').click(function() {
if ($(this).attr('selected')) {
alert($(this).val());
}
});

var val = ''
$('#mySelect').change(function() {
newVal = $('#mySelect option:selected').text();
val += newVal;
alert(val); # you need this.
val = newVal;
});
or let's play some more
val = '';
$('#id_timezone')
.focus(
function(){
val = $('#id_timezone option:selected').text();
})
.change(
function(){
alert(val+$('#id_timezone option:selected').text())
});
Cheers.

Retrieve all selected options from a multi select

<select id="abc" multiple="multiple">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">C</option>
</select>
I wish to retrieve all selected values.
No matter what I try it seems to only give me the value of the selected item that is lowest in the list. So if I select A, B, and C it will only return C.
These are the things I have tried:
$('#abc').val()
$('#abc').text()
$('#abc :selected').val()
$('#abc :selected').text()
$('#abc option:selected').val()
$('#abc option:selected').text()
The version of jQuery I am using is v1.9.1

You need to loop through all selected element within select using .each() to get access them individually:
$('#abc :selected').each(function(){
console.log($(this).text());
});
or to get the values in array
var selectedvals = $('#abc').val();
http://jsfiddle.net/spwSL/

You can do:
var values = $("#abc option:selected").map(function() {
return this.value;
}).get();

You can use .map() to store the values in an array and use it:
var vals = $('#abc :selected').map(function(){
return this.value;
}).get();
console.log(vals);
or this way:
var vals = [];
$('#abc :selected').each(function(){
vals.push(this.value);
});
console.log(vals);

For a multiple select when this references the select element, you cannot use this.value as that will return only one value. As #MilindAnantwar has noted above $(this) will return an array. If you were interested in a comma-delimited string rather than an array you can use the join() array method to join the various values into a string:
var selectedOpts = $( '#abc' ).val().join( ',' );
Otherwise you would have to access the elements by array notation [0], [1], .... [n-1].

Set selected value in multiple select list

I have this multi select list:
<select id="vendors" name="vendors" multiple="multiple">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
When the page loads, I'm loading a list of ids that need to be selected in my select list. Here's how I'm trying to do it:
var vendors = GetVendorArray(); // list of vendor ids I want selected
$.each(vendors, function(index, item) {
$("#vendors").filter(function() {
return $(this).val() == item;
}).attr('selected', true);
});
But this doesn't work, none of the items are being selected. Anyone know what I'm doing wrong?

Simplest approach is just pass the whole array as value to the select using val(). With mulitple select value is an array
$('#vendors').val( GetVendorArray())
DEMO:http://jsfiddle.net/sPKAY/
The problem with approach you took was not looping over option tags

filter reduces the set of matched elements to match the additional selector/callback fn. output. You need to target the <option> elements, not the drop-down list itself, since you're trying to select the option based on whether its value matches your array contents.
var vendors = GetVendorArray(); // list of vendor ids I want selected
$.each(vendors, function(index, item) {
//you're filtering options, not the list itself
$("#vendors > option").filter( function() {
return $(this).val() == item;
}).prop('selected', true); //use .prop, not .attr
});

Loop through string of dropdown options and select

I want to select an option in a string, where the string will be the contents of a dropdown, but I dont know how to loop through the string as an object please.
In the example I would like "Saab" to be selected and the string alerted.
var x = '<select><option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select>';
$.each($(x), function(index, value) {
if ($(this).val() == "Saab"){
$(this).attr("selected","selected")
}
});
alert(x);

Start by turning the string into a jQuery object:
var x = $(x);
Then just select the correct option and set it as selected:
$('option:contains("Saab")', x).prop('selected', true);
FIDDLE

$.each($('option', x), function(index, value) {
if ($(this).text() == "Saab"){
$(this).attr("selected","selected")
}
});

Is this in an HTML page? If yes, why not just use something like $("option").each()?

Don't need to loop, jquery can do that for ya
$(x).children('option:contains("Saab")').attr('selected','selected');
ref: http://api.jquery.com/category/selectors/

Auto populate select box using Javascript and jQuery

I have a select box:
<select id="translationOptions" name="translationOptions"></select>
And I have a js array
var translationOptions = ["Egyptian Hieroglyphs", "Al Bhed (Final Fantasy X)", "Futurama"];
How would I auto populate the select box based on the var translationOptions?

$.each(translationOptions, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
What is the best way to add options to a select from an array with jQuery?

$.each(translationOptions, function(index, value) {
$('#translationOptions').append($("<option />").val(index).text(value));
});
This uses text for display and index in the array for value.

You can create options dynamically and append to select box in this way as well.
jQuery.each(translationOptions, function(key, value) {
jQuery('<option/>', {
'value': key,
'text' : value
}).appendTo('#translationOptions');