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

$(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?!

You are a genius! Thanks for sharing. Cheers Marc

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!

Hi.

helpful post…thanks a lot…!
I was trying to get the id of selected option. I actually want to use 3 values for 3 different purposes.
Following code might help someone who needs. This works for me.

HTML:

<select id="AAA0001" onchange="javascript:showLanguageCode();">
    <option id="en" value="English">The Free Encyclopedia</option>
    <option id="de" value="Deutsch">Die freie Enzyklopädie</option>
    <option id="it" value="Italiano">L’enciclopedia libera</option>
</select>

JavaScript:

function showLanguageCode()
{
   alert($('#AAA001 :selected').attr('id')+' - '+$('#AAA001 :selected').val()+' - '+$('#AAA001 :selected').text());
}

Thanks Again…

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