javascript - JQuery Find <option> tag by it value in <select> - Stack Overflow

admin管理员组

文章数量:1353272

<select name="InputSource"  class="required page_basic" style="margin-left:23%" form="broadcastform" >

        <option value="">Broadcast Input</option>             
        <option value="0">HDMIPhy</option>             
        <option value="1">USB Streaming</option>             
        <option value="2">MPEC-TS Interface</option>             
        <option value="3">VIP(Ethernet)</option>         

</select>

So Basically, I'm trying to find its text by its value. e.g if value = 0 its return me "HDMIPhy".

So this select tag is the 4th tag in the "form" tag. This is what I tried.

$("select:nth-child(4), #someid").text()

but somehow I dont want to give all option tag an unique id which will be exhausted. Is it possible to get it by its value? Also, the 1st,2nd,3rd tag in form tag is not select. Is it possible to get like only select for the form which means 1st select tag in my case. Anyone has idea bout it?

<select name="InputSource"  class="required page_basic" style="margin-left:23%" form="broadcastform" >

        <option value="">Broadcast Input</option>             
        <option value="0">HDMIPhy</option>             
        <option value="1">USB Streaming</option>             
        <option value="2">MPEC-TS Interface</option>             
        <option value="3">VIP(Ethernet)</option>         

</select>

So Basically, I'm trying to find its text by its value. e.g if value = 0 its return me "HDMIPhy".

So this select tag is the 4th tag in the "form" tag. This is what I tried.

$("select:nth-child(4), #someid").text()

but somehow I dont want to give all option tag an unique id which will be exhausted. Is it possible to get it by its value? Also, the 1st,2nd,3rd tag in form tag is not select. Is it possible to get like only select for the form which means 1st select tag in my case. Anyone has idea bout it?

• javascript
• jquery
• html

Share Improve this question Follow asked Aug 16, 2016 at 3:32 PawanPawan 12111 gold badge55 silver badges1515 bronze badges 3

• you want the value for which one selected – Maharajan Commented Aug 16, 2016 at 3:35
• attribute selector – epascarello Commented Aug 16, 2016 at 3:35
• If you intend using jQuery in your projects, please take a few minutes to browse through the plete list of selectors. There aren't that many, and in future you'll have a better idea of how to get jQuery to do stuff. (Or even browse through the list of all methods and selectors.) – nnnnnn Commented Aug 16, 2016 at 3:35

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You could use an attribute selector:

$("select[name='InputSource'] option[value='0']").text(); //"HDMIPhy"

Or if you have a variabls:

$("select[name='" + resul‌​t[i].name + "'] option[value='" + result[‌​i].value + "']").text();

Do not rely on order and count of elements. Rely on what these elements are.
If you don't want to use IDs, you can use input names instead:

function displaySelectText(selectName, optionValue) {
  var $select = $("select[name='" + selectName + "']");
  var $option = $select.find("option[value='" + optionValue + "']");
  
  return $option.text();
}

console.log(displaySelectText("InputSource", "3"));

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="InputSource">
  <option value="">Broadcast Input</option>             
  <option value="0">HDMIPhy</option>             
  <option value="1">USB Streaming</option>             
  <option value="2">MPEC-TS Interface</option>             
  <option value="3">VIP(Ethernet)</option>         
</select>

If you have already value set then you can get selected text by simply:

var itemText = $("select[name='InputSource'] option:selected").text();
console.log(itemText);

If your value not set and you wants static then you can get by:

var itemText = $("select[name='InputSource'] option[value='1']").text();
console.log(itemText);

Just as an alternative, you can also use .filter():

var x = $('select[name="InputSource"] > option').filter(function(index, element){
        return $(element).val() == "1";
    }).text();

alert(x);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="InputSource"  class="required page_basic" style="margin-left:23%" form="broadcastform" >

        <option value="">Broadcast Input</option>             
        <option value="0">HDMIPhy</option>             
        <option value="1">USB Streaming</option>             
        <option value="2">MPEC-TS Interface</option>             
        <option value="3">VIP(Ethernet)</option>         

</select>

$( "#myselect option:selected" ).text();

<select id="myselect">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

本文标签： javascriptJQuery Find ltoptiongt tag by it value in ltselectgtStack Overflow