Sunday, May 27, 2012

jQuery get specific option tag text


All right, say I have this:




<select id='list'>
<option value='1'>Option A</option>
<option value='2'>Option B</option>
<option value='3'>Option C</option>
</select>



What would the selector look like if I wanted to get "Option B" when I have the value '2'?



Please note that this is not asking how to get the selected text value, but just any one of them, whether selected or not, depending on the value attribute. I tried:




$("#list[value='2']").text();



But it is not working.


Source: Tips4all

11 comments:

  1. It's looking for an element with id list which has a property value equal to 2. What you want is the option child of the list.

    $("#list option[value='2']").text()

    ReplyDelete
  2. $("#list option:selected").text();

    ReplyDelete
  3. Based on the original HTML posted by Paolo I came up with the following.

    $("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
    });


    It has been tested to work on Internet Explorer and Firefox.

    ReplyDelete
  4. This worked perfectly for me, I was looking for a way to send two different values with options generated by MySQL, and the following is generic and dynamic:

    $(this).find("option:selected").text();


    As mentioned in one of the comments. With this I was able to create a dynamic function that works with all my selection boxes that I want to get both values, the option value and the text.

    ReplyDelete
  5. $("#list option:selected").each(function() {
    alert($(this).text());
    });


    for multiple selected value in the #list element.

    ReplyDelete
  6. Try the following:

    $("#list option[value=2]").text();


    The reason why your original snippet wasn't working is because your OPTION tags are children to your SELECT tag, which has the id list.

    ReplyDelete
  7. I wanted to get the selected label. This worked for me in jQuery 1.5.1.

    $("#list :selected").text();

    ReplyDelete
  8. $("#list [value='2']").text();


    leave a space after the id selector.

    ReplyDelete
  9. While "looping" through dynamically created select elements with a .each(function()...): $("option:selected").text(); and $(this + " option:selected").text() did not return the selected option text - instead it was null.

    But Peter Mortensen's solution worked:

    $(this).find("option:selected").text();


    I do not know why the usual way does not succeed in a .each() (probably my own mistake), but thank you, Peter. I know that wasn't the original question, but am mentioning it "for newbies coming through Google."

    I would have started with $('#list option:selected").each() except I needed to grab stuff from the select element as well.

    ReplyDelete
  10. well there answers are good hope you like mine too

    function selected_state(){
    jQuery("#list option").each(function(){
    if(jQuery(this).val() == "2"){
    jQuery(this).attr("selected","selected");
    return false;
    }
    });
    }

    jQuery(document).ready(function(){
    selected_state();
    });

    ReplyDelete
  11. I wanted a dynamic version for select multiple that would display what is selected to the right (wish I'd read on and seen $(this).find... earlier):

    <script type="text/javascript">
    $(document).ready(function(){
    $("select[showChoices]").each(function(){
    $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
    doShowSelected($(this).attr('id'));//shows initial selections
    }).change(function(){
    doShowSelected($(this).attr('id'));//as user makes new selections
    });
    });
    function doShowSelected(inId){
    var aryVals=$("#"+inId).val();
    var selText="";
    for(var i=0; i<aryVals.length; i++){
    var o="#"+inId+" option[value='"+aryVals[i]+"']";
    selText+=$(o).text()+"<br>";
    }
    $("#spn"+inId).html(selText);
    }
    </script>
    <select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
    <option selected="selected" value=1>opt 1</option>
    <option selected="selected" value=2>opt 2</option>
    <option value=3>opt 3</option>
    <option value=4>opt 4</option>
    </select>

    ReplyDelete