jQuery Tip - Getting Select List Values: jQuery, Tutorial

This is a commonly asked question on jQuery Help, too, and very useful to know.

Would this also work for select lists / listboxes that are multi-select? Would it return a delimited list or an array?

If you use text() on multiple elements it will return one concatenated string such as "OneTwoThree"

If you want a real array, I'd use this:

$.map($('#foo :selected'), function(e) { return $(e).text(); })

There you'll have ["One", "Two", "Three"]

The problem is when you try to select a specific option from the list:

<select id="s1">
<option value="">1</option>
<option value="1">2</option>
<option value="4">3</option>
<option value="5">4</option>
</select>
<script>
$("#s1").val("4");
</script>

It doesn't work but

$("#s1").val("1");

works just fine. Strange behaviour.

Sometimes it selects it by value, sometimes by text, or by selectedIndex. My point is that is not consistent. I expect to always select the option based on its 'value' attribute, when value is provided with val(). Otherwise is just confusing and not usable.

How i delete one option in the select using jquery, do you know i not have idea.

thanx for information

I tried the :selected selector in my jquery but, to no avail, it keeps returning the first option's text. I am using this on a dynamic list using a JS functoin. Any tips?

Thank god for that article, would've had some really odd articles otherwise!

Thanks for the article. My main problem is I'm trying to perform an action when a particular item is selected. For instance, if the text of the selected item == "First Option" then expose hidden div. I can't seem to get this code into a workable format to perform actions. Please help

Hi All,

I'm trying to manually change the value of a select menu to a certain
option by referencing it's value.

I've got the three instances I've tried (below) which aren't changing
the select menu option correctly, in which am having trouble getting
the correct syntax as to how to SET the value on an "onClick" event.

a href="#" onClick="$("#select_9").attr('value','23')); return
false;">one

a href="#" onClick="$("select[id='select_9']").attr('value','23')); return false; li>

a href="#" onClick="$("select_9").val("23"); return false;"

Can someone help me find the correct syntax?

Thanks!

Thanks for the post, very handy.

pretty blog and useful tips .. keep posting and we will keep reading :)

Thanks for the post : love the different examples used.

Hello,

I've been trying to get information out of a select list:

var TimezoneT = $('#TimezoneP1').val();

But it doesn't seem to retrieve it - any ideas what I'm doing wrong?

The select list looks like :
<select id="tz1" id="TimezoneP1" name="TimezoneP1">
<option value="la">la</option>
</select>

Any help would be greatly received!

Regards,
Paul

It appears I may've been a bit of a muppet..
.. I've spotted my mistake, that being that I was looking for the name of the object, rather than the id, like I should've done.

So, in fact my code should have been :

var TimezoneT = $('#tz1').val();

Hi!
I use jQuery Loader Content to auto complete the state select tag.

function loadContentKabupatenKotaDiploma(id) {
$("#contenPanKabupatenKotaDiploma").hide();
$("#contenPanKabupatenKotaDiploma").load("../dre-includes/url_pendidikan/findKabupatenKota.php?id="+id+"", '', callbackKabupatenKotaDiploma);
}
function callbackKabupatenKotaDiploma() {
$("#contenPanKabupatenKotaDiploma").show();
}
$(document).ready(loadContentKabupatenKotaDiploma(id));





then here are the html code:
<label>Propinsi</label>
<?
$query="SELECT * FROM master_propinsi";
$result=mysql_query($query);
?>
<select class="input" name="id_propinsi_pendidikan[]" onChange="loadContentKabupatenKotaDiploma(this.value)">
<option value="">Pilih Propinsi</option>
<?
while($rows = mysql_fetch_array($result))
{
?>
<option value="&lt;? echo $rows['id']; ?>"><? echo $rows['nama_propinsi']; ?></option>
<?
}
?>
</select>
<div class="spacer"> </div>
<div id="contenPanKabupatenKotaDiploma"> </div>

I create a script for external file: findKabupatenKota.php

<label>Kabupaten/Kota</label>
<select class="input" id="id_kabupaten_kota_pendidikan" name="id_kabupaten_kota_pendidikan[]">
<option>Pilih Kabupaten/Kota</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=&lt;? echo $row['id']; ?>><? echo $row['nama_kabupaten_kota']; ?></option>
<? } ?>
</select>

AND now I want to get the value of id_kabupaten_kota_pendidikan[].

I try this way for POST FORM Action:

for($d=0;$d <= count($_POST['nama_pt']);$d++)
{
$jQueryKabKPendidikan[$d] = "<script>$('[@name=id_kabupaten_kota_pendidikan]')[$d].val(); </script>";
if(!empty($_POST['nama_pt'][$d]))
{
mysql_query("INSERT INTO `data_pendidikan_terakhir` (
`id_peserta` ,
`id_jenjang` ,
`tahun_lulus` ,
`id_jurusan` ,
`nama_pt` ,
`id_propinsi` ,
`id_kabupaten_kota` ,
`tanggal_input`
)
VALUES (
'".$noUrut."',
'".clearString($_POST['id_jenjang'][$d])."',
'0000',
'".clearString($_POST['id_jurusan'][$d])."',
'".clearString($_POST['nama_pt'][$d])."',
'".clearString($_POST['id_propinsi_pendidikan'][$d])."',
'".clearString($jQueryKabKPendidikan[$d])."',
'".thisTime."')");
}

}

The result is $jQueryKabKPendidikan[$d] = 0;

Well... do you have one idea to get multiple value from a selected field ? and is combination of jQuery + PHP a better way ??? Or I must use a complete Ajax Post Action without PHP ?

I am a jquery noob, and wondering if/how the following could be done with your tip:

I want to construct a URL with two segments using two select menus, each contributing to one of the segments, respectively. For example: mydomain.com/segment_1_option/segment_2_option/ would be created, and then the user would be sent to that url once they submit the form.

Very useful. Thank you.

Instead of

var foo = [];
$('#multiple :selected').each(function(i, selected){
foo[i] = $(selected).text();
});

you can use map (more elegant, I think):

var foo = $('#multiple :selected').map(function(){return $(this).val();}).get();

Hello! How to get the first options value?
How to set an attribute "selected" based on the value of the option?
Thanks in advance.

guess it will like this:
1.$("#selectId option:eq(0)").val(); (and how to change value? like this: $("#selectId option:eq(0)").val("setSomeValue");?)
2.$("#selectId option[@value='2']").attr("selected", "selected");
is it correct?
Thank you

how do we select all the option values from a select box? any idea?

Be careful when using $('#selectList :selected').text() because if you have a long list of options like around 3000 (extreme but it does happen) there is a noticeable delay when using the :selected selector. Jquery loops through all options to find the selected option. The best way to handle this is to go back to old school methods and use:

var ix = $( "#selectList" ).attr( "selectedIndex" );
var text = $( "#selectList").find( "option:eq(" + ix +")" ).text();

Came up with this way of doing it --

var v = $( "#selectList" ).val();
var text = $( "#selectList[value='" + v + "']").text();

BAM!

If try the sample above I get the following array.


var foo = [];
foo = $.map($('#foo :selected'), function(e) { return $(e).text(); })
alert(foo);

item1,item2,item3



Instead I am looking for the following array.

'item1','item2','item3'



Am I missing something here?

I was looking for selecting input field on user focus but came across this article through search engine. If anyone is looking for the same behavior read on this article:

http://jquery-howto.blogspot.com/2009/04/select-text-in-input-box-on-user-select.html

@Craig, even shorter would be:

var text = $( "#selectList[value='" + $( "#selectList" ).val() + "']").text();

Good Job...

Just wanted to stop by and say thanks. One or two of the ideas on here helped me finish off a WP plugin.

very very useful and i need to read this every time i forget :)

If you're after an API for common form field tasks, this plugin provides extra methods:

http://code.google.com/p/jquery-form-extensions/

It has methods such as (plus many more):
- isRadioBox
- isChecked
- isSelected
- selectedValue
- selectedValues()

e.g. $("#myradio").selectedValue() would find the selected value from all the radio options.

I want to sort data based on value in select Tag.

This is the example for :selected from JQuery website (the working one :P)
The Question is: how can i do the same but only for 1 select control? i've tried with:
...
$("#myselect").change(function () {
var str = "";
$("#myselect option:selected")
...
but nothing happens...
any ideas?
(PS: im new with js & jquery, so be nice pls :) )

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
window.onload = (function(){try{

$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.trigger('change');

}catch(e){}});</script>
<style>
div { color:red; }
</style>
<style>html,body{border:0; margin:0; padding:0;}</style></head>
<body>
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option selected="selected">Shrubs</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
</body>
</html>

Thank you for the very helpful post.

@FV:
> how can i do the same but only for 1 select control?

Try putting your methods inside the Document Ready method, like this:

$(document).ready(function(){
$("#myselect").change(function () {
...
});
});

Hey thanks alot, helped me alot on my project!

Thanks for posting this. :)

Ok, let's say I get the values of multiple select box:

> ids = $('#ericsselectbox').val();
> ids;
"3,5,10"

I can't pass this back. It won't work.
> $('#ericsselectbox').val("3,5,10")

This selects nothing.

If I do this:
> ids_iterator = id_str.split(','); // this results: "3,5,10"
> for (id in ids_iterator) $("#ericsselectbox").val(ids_iterator[id]);

The option whose value is 10 is select but the other two options are not! :(

Anybody know how to accomplish this?

Thanks
Eric

Very useful. Thanks.

Hey your code for getting the text is wrong. it should be

$('#selectList option:selected').text()

thank you very much! it helps me! :)

Thank you for this simple solution. I search a lot to find this kind of simple solving my problem. Thanks !

Thank you so much, a very simple solution to a very small yet very irritating problem.

Thanks again,
John.

Thanks, exactly what I was looking for!

I am having the same problem as Tim where jquery $.val() returns a multi select list as:

'item1,item2,item3 '

instead of

'item1', 'item2', 'item3'

This causes problems in django when trying to read the options. :(

thanks

Thanks. I am always pounding Google looking for help with programming JQuery as I'm too lazy to buy a book, however I think it's time I invested in a real, physical reference. Do you have a favorite JQuery book or reference you would recommned?
Thanks,
Eric

Many thanks Marc - just googled and came here. Wouldn't have guessed the :selected modifier to get the text item in a month of Sundays! ;o)

Hello, I am trying to acomplish the same as #17. Taylor, I want to manually change wich item is selected....
For instance I have :

<div id="container">
<div id="lava">

• Om Walking Artwork


• Om kunstneren


• Kontakt


• Vilkår og betingelser

</div>
</div>

How can I with javascript change wich one is selected..... In the js-code, there is something I maybe could use:
//reset the selected item
$('#lava li').removeClass('selected');

//select the current item
$(this).addClass('selected');
//
But instead of "this", what should I use???? Can I give certain values to the list, and how would I do this?

Any help is much apreciated!!! Please reply in mail, if you can: n_alstrup ADD hotmail.com

Regarding the post above:
Here is the code in "writing"

<div id="container">
<div id="lava">

• Om Walking Artwork


• Om kunstneren


• Kontakt


• Vilkår og Betingelser

</div>
</div>

nobody saw on jquery tiptext?

I have read your entire article. Very useful information summer. Thanks

I am not so familiar with jQuery Tip but your post helped me understand more (comments are also great!)

Hi,
I have a scenario like a set of List boxes in a page which retrieves their values from the database. In that each List Items depends on the Previous Selections. for example : Country->State->City. So, to know the State, First we need to select the Country and that value need to be passed on to the next List Item and vice versa.

I'm using PHP and MySQL, tried some code using Javascript, but it doesn't works. can anyone please guide me in this ?...

Thanks in advance.

Thanks!

uys, I also found this better explained at http:/

I am trying to create a js form, where I can have a item with a list in this case quantity and have js enter a value into a text box when I select a option.
For example when I select a quantity of 3 I would see the value 447 in the text box to the right. If possible with a symbol like £ or € in front of the value.

I have been trying something like this but I am getting more and more confused.
Any help would be greatly appreciated.

<script type="text/javascript">

function put(){
txt=document.forms[0].quantity-s-c-uk.selectedValue[document.forms[0].quantity-sky-c-uk.selectedValue].text
document.forms[0].label-quantity-s-c-uk.value=txt
}
</script>

<select name="quantity-s-c-uk" id="quantity-s-c-uk" size="1" onBlur="put()">
<option selected="selected">0</option>
<option value="0">0</option>
<option value="149">1</option>
<option value="298">2</option>
<option value="447">3</option>
<option value="596">4</option>
<option value="745">5</option>
<option value="894">6</option>
<option value="1043">7</option>
<option value="1192">8</option>
<option value="1341">9</option>
<option value="1490">10</option>
</select> 
<input name="label-quantity-s-c-uk" id="label-quantity-s-c-uk" type="text" maxlength="2" readonly="true" value="" >