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>

<a href="#" onClick="$("select[id=‘select_9’]").attr(‘value’,‘23’)); return false;">two</a>

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

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();

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:
$("#selectId option:eq(0)").val(); (and how to change value? like this: $("#selectId option:eq(0)").val("setSomeValue");
$("#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();

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">

  <ul>

    <li class="selected"><a href="om.html" target="hovediframe">Om Walking Artwork</a></li>

    <li><a href="om-nicolas-alstrup.html" target="hovediframe">Om kunstneren</a></li>        

    <li><a href="kontakt.html" target="hovediframe">Kontakt</a></li>        

    <li><a href="betingelser.html" target="hovediframe">Vilkår og betingelser</a></li>                                                

  </ul>

</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

nobody saw on jquery tiptext?

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.forms0.quantity-s-c-uk.selectedValue[document.forms0.quantity-sky-c-uk.selectedValue].text

    document.forms0.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="" >

$(document).ready(function(){

  switch ($(‘#provider : selected’).val()) {

    case ‘video’:

      $(‘tr#yt’).css({"display":"none"});

      $(‘tr#vid’).css({"display":"table-row"});

    break;

    case ‘youtube’ :

      $(‘tr#yt’).css({"display":"table-row"});

      $(‘tr#vid’).css({"display":"none"});

    break;

  }

});

the other parts:

<tr>

  <td>Choose a format</td>

  <td>

    <select id="provider" name="provider">

      <option value="">— Select a video type —</option>

      <option value="video">Video file</option>

      <option value="youtube">YouTube link</option>

    </select>

  </td>

</tr>

<tr id="vid" name="vid" style="display:none">

  <td><label for="file">Select a file to upload</label></td>

  <td><input type="file" name="file" id="file" /></td>

</tr>

<tr id="yt" name="yt" style="display:table-row">

  <td><label for="link">Link</label></td>

  <td><input type="text" name="link" id="link" size="40" maxlength="255"

     title="Copy and paste the link from the YouTube site here"/><br/>

  <span style="font-size:0.8em">Copy and paste the relevant link from YouTube here.</span></td>

</tr>

Any help would be greatly appreciated. I’m probably too tired to see where I’m going wrong. Even if you give me tips of where to look, that might help.

Thanks

Wes

Great post, but how could this without having to click the button to get the value/text and the corresponding figure to be shown on page in a div rather than alert?

Cheers
Glennyboy

seems I may have answered my own question:-

<script type="text/javascript">

$(document).ready(function(){

$("#getdropdown").change(function() {

var trial=$("#getdropdown option:selected").val();

//var trial=$("#getdropdown option:selected").text();

document.getElementById(‘someDivName’).innerHTML = trial;

alert(trial);

});

});

</script>



</head><body>

<select name="getdropdown" id="getdropdown">

  <option value="1">Trial 1</option>

  <option value="2">Trial 2</option>

  <option value="3">Trial 3</option>

  <option value="4">Trial 4</option>

  <option value="5">Trial 5</option>

  <option value="6">Trial 6</option>

</select>

<div id=‘someDivName’>Nothing Selected Yet</div>

… perhaps this could be improved though?!

Thank you, wonderful examples.

Thanks again for all person.

The examples above will work if you know the ID of the select you are trying to observe, but another example that

When using
$("#getdropdown option:selected") i get a hint in the firebug console
“unknown pseudo-class or pseudo-element ‘selected’”.
I got around that by first assigning the select element to a variable like that :
var variable= $("#element");
Then i assigned another variable like that:
var actualText = variable.find(":selected").text();

Does anybody know a drawaback using it like that?
Thanks in advance.

With kind regards
H0MER

Hi Marc,

thanks for the very fast reply :).
Sorry for that .. it WAS working, but i got that unlovely hint in the console – and thats what i dont like :).
The way i did it in the end, i dont get that error anymore, but i wasnt sure, if thats a “bad way” of solving that problem. Slowing down the application for example.

The examples above will work if you know the ID of the select you are trying to observe, but another example that might be useful to readers observing the onChange of many different drop downs.

Lets say you had shopping cart checkout page with 3 line items. Each line item has a drop down for quantity. (not that i would ever write a cart like this but its for example only). Perhaps you want to update the line item total any time a quantity is changed.

1) Add a class to each of these drop downs. You might have other classes attached, but just to handle this functionality we will add our own called “line_item”.

<select name="lineitems[]" id="lineitem_0" class="bigbox line_item">

    <option value="1" selected>1</option>

    <option value="2">2</option>

</select>



<select name="lineitems[]" id="lineitem_1" class="bigbox line_item">

    <option value="1" selected>1</option>

    <option value="2">2</option>

</select>

2) Add a .change handler to your (document).ready section. Here I’m alerting the value of the selected option, but you’d add your own code to update your unobtrusive calculation function.

$(document).ready( function() {

    $("select.line_item").change(function() {

        alert($(this).children("option:selected").val());

    });

});

3) Now when you change any of your select boxes with the “line_item” class an alert box will popup telling you the value of the selected option for THAT specific drop down.

4) Additionally, you might add more line_items using Javascript, in which case the .change handler would be unaware of these newly added drop downs. That is a discussion for creating an init function or using the Jquery bind handler that is for another post.

Really trying to get something to work here..
Want to insert html file content into div based on selected value

jQuery(document).ready(function() {

    jQuery(‘#order_type_id’).change(function() {

    // get the value of the selected option

    switch (jQuery(‘#order_type_id option:selected’).val())

    {

      case 1:

          jQuery(‘#feeds’).load(‘form_storage.html’);

      break;

      case 2:

          jQuery(‘#feeds’).load(‘form_hardware.html’);

      break;

      case 3:

          jQuery(‘#feeds’).load(‘form_license.html’);

      break;

      case 4:

          jQuery(‘#feeds’).load(‘form_backup.html’);

      break;

      case 5:

          jQuery(‘#feeds’).load(‘form_software.html’);

      break;

    }

  });

});

Any ideas what I am doing wrong?

I know.. I put it behind an “if this then that” that didnt “fire”..

My bad..

u can siimply write
$(‘#id’).value

I can see all the ways to select options, but I need a way to deselect all of them, is there a simple way to do that?

Thanks!

thanks so much!

helpful post…thanks!…

Can anyone help me please, I feel like I am so close. I need to do something very similar but instead of getting the value from a select list, I need to get the value from the “A” tag selected, so I can use it later on down the page. How would you get the partial value of a selected link from links in an array? I am using an accordion but that doesn’t really have anything to do with this, this has to do with getting values from an array.

$(‘#accordion’).accordion().bind( "accordionchange", function(event,ui) {

        var $this = $(this),

            myTitle = $(this).find(‘h3 > a.title’).text(),

                target = $(event.target);

                

        /* = debug code === */

        console.log(["myTitle =", myTitle, "target =", target]);

}

myTitle brings back all values in the array when I really just want it to bring back one and if I create an action in this it just applies it to the last element in the array when I want to apply it to the “a:selected” if that exists. Does this make sense?

Any help would be appreciated. :)

Just as an FYI, I did figure it out and it had everything to do with the accordion. So here is the code that I was able to figure out how to get the results with. I actually didn’t use the A tag but if a user clicks on an accordion it will swap out the content with a hidden div. So what I needed was in “ui.whatever”. Here:

var hd = $(‘#hidden-div’);

$(hd).hide();

$(‘#accordion’).accordion().bind( "accordionchangestart", function(event,ui) {

        var content = $(ui.content).find("#oldContent").empty();                        

        var myDiv = $(ui.content).find(".container");

        // -- THE SWAP -— 

        $(hd).appendTo(myDiv);

        $(hd).show();

});

Thanks a lot, very helpful.

Problem returning all selected values from multiple selectboxes, where in every selectbox it is possible to select multiple items: only the selected items of the first selectbox are returned.
Anyone knows a solution?

When I have more than 1 selectbox with the id starting for example with ‘location-’

HTML:

<select  id="location-1" name="name-1" multiple="multiple">

<option value="option1">option 1</option>")

<option value="option2">option 2</option>")

</select>

<select  id="location-2" name="name-2" multiple="multiple">

<option value="option3">option 3</option>")

<option value="option4">option 4</option>")

</select>

Javascript:

alert ( $(‘select[id^=location]’).val() );

Hi there! I’m trying to add a div when a X number is selected. I’ve tried to use this:

switch ($(‘#rooms :selected’).text()) {

  case ‘1’:

     //do something

  break;

  case ‘2’:

     //do something

  break;

}

<div>

<select name="rooms" id="rooms">

        <option value="1" label="room 1" selected="selected">1 room</option>

        <option value="2" label="room 2">2 rooms</option>

        <option value="3" label="room 3">3 rooms</option>

</select>

</div>

<div>

<label class="rooms">Room 1</label>

<select name="adults" id="adults">

        <option value="1" label="1" selected="selected">1</option>

        <option value="2" label="2">2</option>

</select>

<select name="kids" id="kids">

        <option value="1" label="1" selected="selected">0</option>

        <option value="2" label="2">1</option>

</select>                

</div>

But can’t get it work. Also I need to change the label name, for room 1, room 2, and so on.
This is an example of what I’m trying to do: www.cheaprooms.com and select more than 1 room.

Thanks in advance!

Since I found your post looking for a way to remove all the selected options in a listbox and it’s not really wrote here, here’s how we do it :

$('#provider-list :selected').remove();

This will remove all selected items form the list.

This is exactly what I was looking for! Thank you!

You guys rock. Thanks for the great code samples. Much appreciated.

Thanks! This was just what I was looking for.

To set an array to the elements of a multi-select

ids = $(‘#ericsselectbox’).val();
> ids; “3,5,10”
for (i=0;i<ids.length;i++) $(“#ericsselectbox option[value=” + ids[i] +"]“).attr(”selected", true);

Very helpfull post I really appreciate it

Thanks again

quickly found what is was looking for! Thnx!

how do i get the value and text of an option on a given index from a dropdown. Lets say i have a dropdown consisting of 5 items… and i want to pick the value/text of the 3rd one.., wat wud b the code ?

How do I show zip code text feild only when country “US” is selected from drop down using jquery.

How to change the color of selected option in a select box? By defauld dark blue is displayed,but i want to change the color? could you help me out, i have googled a lot but of no use

I have c# list of string. I am trying to write a jquery which will get me the selected items if a listbox into this list of string.can any one help me???

Hi Marc,

I have 2 select boxes, the second one loads elements using the 1st select value. I use (1) to load the data already selected by user from database, and (2) for onchange of 1st select box.
(1) $(document).ready(function() {
str=$(‘#country_id :selected’).val();
//alert (str);
$(“#state”).load(“actions/get_counties.php?counties_id=<?=$counties_id?>&country_id=”,str).fadeIn(“slow”);

});
(2) $(document).change(function() {
str=$(‘#country_id :selected’).val();
$(‘#counties_id :selected’).remove();
//alert (str);
$(“#state”).load(“actions/get_counties.php?country_id=”+str).fadeIn(“slow”);

});
It seems i can’t select another entry from the second select box, it keeps returning the first option.
Any hint?

Thanks

Exactly what i need. Thanks.

I don’t see a form element in this page, is it valid XHTML to have selects without a form ?? I’m trying your example on my site, but with a form element and I think it takes over the functionality of the go button, so it’s not working correctly.

hi marc, thanks for the post.
but I would like to ask a question. I need something like selectlistitem things on my codes, but I have three properties.
I get these properties from database query.
if I would like to
return query.ToSelectListItems()

and on the JScript I get the first two properties by
$(‘#Variable’).change(function() {
$(‘Property1’).val($(‘#Variable option:selected’).val());
$(‘Property2’).val($(‘#Variable option:selected’).text());
});

how do I get the third properties ?

or do I have to use another method beside ToSelectListItems() ?

Hi marc,

please help me with this…

<select name="cid" class="style7" onChange="javascript:document.info.submit()" >

  <option value="search" ></option>

  <? while ($r=mssql_fetch_array($query)) { ?>

    <option value="<?=$r[‘studentid’]; ?>">

      <? echo $r[‘firstname’].$r[‘lastname’].‘,’.$r[‘middlename’]; ?>

    </option>

  <? } ?>

</select>

i wanted to get the value selected (studentid), and echo it on the action page (info) on submit, triggered by the onchange event.

Hi Marc,
Is it possible to get value from coding below:
Car 1

Car 2
How to get “Price6000” when i click “Car 2” ?

Thx & GBU

thanks for the post… very useful…

thanks for the post, this helps me out!

Thank u to all who have given the solution for my problem…

Why doesn’t this work and how do I fix it?

function loadContent(elementSelector, sourceUrl) {

$(""elementSelector"").load("http://www.yoursite.com/"sourceUrl"");

}

<form method="get" action="javascript:loadContent(‘#content’,‘test_this.php?number=<?php $number; ?>’);" enctype="multipart/form-data">

<select  name="number" onchange="this.form.submit()">

<option>Pick one:</option>

<option value="20" >20</option>

<option value="30" >30</option>

<option value="40" >40</option>

</select>

</form>

</div>

<div id="content">The number is not set as of yet</div>

@Metaplane because you cannot put js inot the form action it must instead go into the submit property of the form tag.

how can I get 2 values(of table) from 01 select ??? Help me, plzzzz

@#98. Santosh Chakrapani

thanks for the solution

Hi, Great Work. But I have a question.
I am working on ASP.NET with Gridview control on my page. On edittemplate column i have listbox controls. I have more then three columns, but in 3 of the edittemplate columns of gridview I have provided listboxes. These listboxes contain the list of names.
My question is I would like to perform that if one name is selected from the Listbox1 and if the same name is already selected in ListBox2, it should unselect the option from the ListBox1.
BAsically comparing the two listboxes and allow to select those which are not selected. ?
Can anyone have any solution or help for this.??

Wonderful, great tips! Thx!

Nice Info!!..

Awesome — thanks!!

How do I get the value of a select option if I only have the text of the option. Any help greatly appreciated

Thanks for this article!

Hi Bro,
I am new to php and wordpress.
I am trying to combine the below two code.
What I want is to show job type as dropdown list and get the value when the user click submit button at the bottom the page.
Could you tell me How can I achieve this ? Thanks you.

   <div class="field">

            <label for="jobtype"><?php e(‘Job type’, "wpct");?></label>

            <input id="jobtype" name="jobtype" type="text" value="<?php echo cP("jobtype");?>" class="icotitle" />

          </div>



<select>

  <option value="parttime">Part Time</option>

  <option value="fulltime">Full Time</option>

</select>

Rgds,
KoKO

You can see the website live through the link under my name KoKo. Thanks.

Thanks for clarifying the difference between .val() and .text().. Cheers!

This is good information, but I’m having a difficult time finding an example of using jQuery to search through the list of select options to see if a particular text or value already exists.

I just found the answer to my question:

var opt = $(‘option[value=“{MyValueToMatch}”]’, $(‘#MySelectElement’));
if (opt.val() == ‘’) {
alert(’{MyValueToMatch} not already in the select list’);
}

very nice article…

thank you so much for the article

thank you for your article!

Great very usefull, save me your tutorial, greetens from mexico!

Great !

I need to read the value and the text from a listbox and then create each option value into a textbox with a dropdown next to it. So, I have a list of team members that once selected need to be assigned a role (via dropdown). How can I loop through the listbox gathering all data from the listbox using JQuery? Thanks

Hi from Brazil… Great blog… somebody can help me with this?

i still noob in java… and i’m having some troubles with a (i think) simple function…

$(“#anuncioDestinatario”).keyup(function(){
var takeuser2 = $(‘#anuncioDestinatario’).val();
$(“#changeDest option[value=takeuser2]”).attr(“selected”,true);
});

is that simple… every time there is a “keyup” on a input, he set his value in “takeuser2”, later, he check the SELECT #changeDest with the value “takeuser2” (if exists) to SELECTED…

just like that… if i change the “takeuser2” for the #changeDest event for a word there exists on the “#changeDest select”, he works… but using the string “takeuser2” he just do nothing… :S

what can be?

sorry for the bad english… :P

thankssss \o

hi there… i have a few selects that are created dynamically on a form and i want to check if any of them have a value of "". How can i do this.
Thanks in advance.

nice informative post, thanks for sharing .

thanks for the post… very useful…

Hi . I am trying to get the selected options text as u have done and then storing it in jquery variable as shown below
var selectedoption =$(“select :selected”).text
I am the select list on index.php and i want that as soon a user clicks any option the corresponding option’s content gets displayed below . My custom.js file is actually not being MODIDFIED At all (as FIREBUG says ).
So can u help me with this ?

I have a select list on index.php and i want that as soon i click any option from the select list the corresponding option’s content gets displayed below in index.php .
My custom.js file where i have retrieved the selected option and doen other stuff is actually NOT being MODIFIED At all (as FIREBUG says ).

Here is the link to file
index.php

hi all.
whats my problem in this code?

var code=20;        

$("#List").children("option").each(function(x) {

      if ($(this).val() == "‘"code"’")

        $(this).remove();

});  

<select id=‘List’>

<?php

    $result=mysql_query("SELECT *  FROM `mydb`.`list`");

    while ($list=mysql_fetch_array($result , MYSQL_ASSOC))

    echo "<option value=\‘".$list[’code’]."\‘>".$list[’name’]."</option>";

?>

</select>

Thank you for the very helpful post.

Thanks for this! I bookmarked it so I can return when I forget, which I’m sure I will.

in selecting the value like

<select id="selectthis">

<option value=‘first’>first word</option>

</select>

$(“#selectthis”).val();

the result for this is ‘first’

for selecting the text in the option like

<select id="selectthis">

<option value=‘first’>first word</option>

</select>

$(“select#selectthis”).val();

the result for this is ‘first word’.

Hi,
I have the following code in JSP,

<select  class="styledselect_form_1" id="consignor" name="consignor">

<option value="">—Select Consignor—</option>

<%

ArrayList consignorList = (ArrayList) session.getAttribute("consignors"); 

for(int i=0;i<consignorList.size();i++){

Consignors ct = (Consignors)consignorList.get(i);

>

<option value="<=ct.getConsignorID()%>"><%=ct.getConsignorName()%></option>

<%

}

>

</select>

<select  class="styledselect_form_1" id="City" name="City">

<option value="">—Select City—</option>

<

ArrayList cityList = (ArrayList) session.getAttribute("cityDet"); 

for(int i=0;i<cityList.size();i++){

CityList ct = (CityList )cityList.get(i);

>

<option value="<=ct.getCityID()%>"><%=ct.getCityName()%></option>

<%

}

%>

</select>

Now I want to know that how can i choose particular item in second list say “city” on selecting an item of the first list.
plz help me
Thanks in advance….

you rocks :)

THANK you! Cleared my question right up!

Hi All,

I am new to Jquery. I have some Issues. Your reply is appreciable. I have a form in my website. And have an option of adding clicking on “Add Another” otion to generate one more form i.e., replica of the form. So like this multiple copy of the same form can be created. Clone method is used for this. But in each form I have a drop down box onchanging of that form fields should get changed. So I have binded an onchanage event for select box class and by recognizing parent ids corresponding form fields will get chnaged onchange of drop down value. But problem is that when I click on submit validation is done in php codeignitor when the page submitted if it displays some error messages for some mandatory fields all the form fileds will get displayed doesnot matter of what is getting selected in drop down box. Sorry for this lengthier text. Hope you understand this

hi, I want all values from list box in comma seprated like an want to display it in the text box can any one please help me with that please

Hi,
i have two array (name input)
arr1[]=1;
arr1[]=2
….

arr2[]=1
arr2[]=2
….
I can’t display values in jquery (one function )

Please, how is possible if i want to select all values from the select option as a variable(list) to use somewhere else

m a beginner, wanted to know, how do we save a selected list item in session..

Friend this work, I am happy with your tutorial. I was tried it with jsfiddle and work good. Thank you.

it helps me, thank u

i need a favour ." how to make multi-selector as selected while loading the page based on db values using jquery "

y el ejemplo con jsf? por alli vi que habia que hacer : jQuery(‘#miForm\\:correo’).attr(“value”);

i Am creating a dynamic picklist . How to refresh the picklist after closing it . When i again open the same list i dun want the last values to retain. The problem that i am facing is its retaining the old values, and appending the new ones to it

i Am creating a dynamic picklist . How to refresh the picklist after closing it . When i again open the same list i dun want the last values to retain. The problem that i am facing is its retaining the old values, and appending the new ones to it

Splendid! Worked as a charm! Thanks alot!