如何获取选择选项标签的第二个值

时间:2014-11-28 15:24:28

标签: jquery

我有如图所示的HTML

<select class="m-wrap" id="T1Select" tabindex="1" style="width:100%;">
   <option class="placeholder" selected="" disabled="">Select T1</option>
   <option value="Ice Creams">Ice Creams</option>
   <option value="Popcorn">Popcorn</option>
</select>

我试图获得第二个值,如图所示

var aa = $("#T1Select option[value='2']").text();
alert(aa);

这是我的jsfiddle

http://jsfiddle.net/zyrndtLb/

有人可以帮助我吗

3 个答案:

答案 0 :(得分:1)

您可以使用jQuery&#39; eq()来获取任何元素的索引。

所以你的例子看起来像这样:

var aa = $("#T1Select option").eq(1).text();
alert(aa); // Alerts "Ice Creams"

上面的代码片段会提示&#34; Ice Creams&#34;,这是&#34;第二个元素&#34;在零索引的选项列表中。如果您想要定位爆米花&#39; element,只需在eq()索引中添加一个。像这样:

var bb = $("#T1Select option").eq(2).text(); 
alert(bb); // Alerts "Popcorn"

Here is your updated fiddle with the working code http://jsfiddle.net/zyrndtLb/3/

希望这有帮助!

答案 1 :(得分:0)

使用nth-child

var aa = $("#T1Select option:nth-child(2)").text();

您无法使用value定位,因为第二个选项的valueIce Creams,而不是2

答案 2 :(得分:0)

对于这种用例,Jquery提供:nth-child() Selector doc.eq() doc

&#13;
&#13;
var aa = $("#T1Select option:nth-child(2)").text();
alert(aa);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="m-wrap" id="T1Select" tabindex="1" style="width:100%;">
   <option class="placeholder" selected="" disabled="">Select T1</option>
   <option value="Ice Creams">Ice Creams</option>
   <option value="Popcorn">Popcorn</option>
</select>
&#13;
&#13;
&#13;