jQuery Tip - Getting Select List Values: jQuery, Tutorial

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?