jQuery Tip - Getting Select List Values

Chris Hartjes asked me a simple question today, but it is worth noting because I have asked the same before, "How do you get the current value from a select list?"
To get the current value is very simple using val().
JavaScript:
$('#selectList').val();
But sometimes you may need to get the selected option's text. This is not as straight forward. First, we get the selected option with :selected selector. Then once we have the option, we can get the text with the function, text().
JavaScript:
$('#selectList :selected').text()
View Demo:
Note on July 23 @9:14AM: HoyaSaxa93 wrote in to ask how to get values from select multiples. I will create the demo and code below. This would be how to set a select multiple to an array called, "foo".
JavaScript:
var foo = []; $('#multiple :selected').each(function(i, selected){ foo[i] = $(selected).text(); });
Comments
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"]
val()will work just fine to get an array of values, but to get an array of text is a little different. I added code to the bottom of the article that describes how to get the selected options text to an array.rd: I don't understand
$.mapenough to comment on it, I will have to look into that!<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.
$("#s1").val("4");works to select the fourth option.$("#s1").val("1");or$("#s1").val("2");will select the second option because you don't have a value set for the first option. To select the first option use,$("#s1").val("0");.$('#s1')[0].selectedIndex = 0;. I personally have not usedvalto set the value of a select list before. I just tested it above based on your comment.$("#selectList option[@value=2]").remove();This would grab select list with id, "selectList" and find an option within it that has value, "2" - then remove it.
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?
switch ($('#selectList :selected').text()) {
case 'First Option':
//do something
break;
case 'Something Else':
// do something else
break;
}
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!
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
.. 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();
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="<? 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=<? 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 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.
you can use map (more elegant, I think):
How to set an attribute "selected" based on the value of the option?
Thanks in advance.
$("#mySelect option:first").val()should work to get the value of the first option.$("#mySelect option[value=CHECKVALUE]").attr("selected",true);will work to select an option based on it's value (replaceCHECKVALUEwith the value you are checking for, of course).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
:firstand:eq(0)are the same selector. You are correct on how to change the value.2) Never use the "@" symbol for getting an attribute, that has been depreciated and will throw errors in jQuery 1.3. Instead, your desired statement would be written as
$("#selectId option[value=2]").attr("selected",true);var ix = $( "#selectList" ).attr( "selectedIndex" );
var text = $( "#selectList").find( "option:eq(" + ix +")" ).text();
var v = $( "#selectList" ).val();
var text = $( "#selectList[value='" + v + "']").text();
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?
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();
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.
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>
> 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 () {
...
});
});
> 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
$('#selectList option:selected').text()
Thanks again,
John.
'item1,item2,item3 '
instead of
'item1', 'item2', 'item3'
This causes problems in django when trying to read the options. :(
Thanks,
Eric
For instance I have :
<div id="container">
<div id="lava">
</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
Here is the code in "writing"
<div id="container"><div id="lava"></div></div>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.
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="" >