jquery - 在选择中获取单击选项的 id

Question

HTML:
<select id="leftpane" size="10">
    <option id="1" value="one">One</option>
    <option id="2" value="two">Two</option>
</select>

jQuery:
$("#leftpane").click(function () {
    alert(this.id);
});

在上面的代码中，如果我单击一个项目，它将显示选择的 id 是“leftpane”。我想要的是被点击的选项的 id。我可以很容易地获得价值：

alert($(this).val());

但是我如何获得点击选项的 id 呢？

Answer 1

Adjust the selector to choose the options. This will cause the event handler to be assigned to options instead of the drop down.

$("#leftpane option").click(function () {
    alert(this.id);
});

Working Example http://jsfiddle.net/hJdpV/

Answer 2

我认为您应该改用该change事件；it gets triggered whenever a new option is selected:

$("#leftpane").on('change', function () {
    var id = this.options[this.selectedIndex].id;
});

在事件处理程序中，您可以使用它this.options[this.selectedIndex]来查找所选<option>元素。

Answer 3

您可以使用以下代码获取选定的元素 ID。

$("#leftpane").change(function(){
    $(this).find("option:selected").attr("id");
});

OR

$("#leftpane").click(function(){
    $(this).find("option:selected").attr("id");
});

Answer 4

尝试这个：

$("#leftpane option:selected").prop('id');

Answer 5

this is working i have tried .......... 

` $(document).ready(function () {
      $("#leftpane option").click(function () {
        alert(this.id);
          });
    }); `

Answer 6

请试试这个:)

$("#leftpane option").click(function() {
    var clickedOptText = $(this).text();
    alert(clickedOptText)
});

或者

$("#leftpane option").on("click",function(){

   var clickedText = $(this).text();
   alert(clickedText);
   var clickedValue = $(this).value();
     alert(clickedValue);

});