Question

我正在尝试学习jQuery，我希望所有三个相同的选择框在选中时更新变量id。

我可以获得第一个选择框以在警报中显示ID，但无法弄清楚如何让其他两个选择框工作。

我对.each做错了，因为它没有定位每个ID为#mySelect的选择框。

我希望所有三个选择框与第一个选择框完全相同。

谢谢！

<select name="mySelect" id="selectID">
 <option id="myid1" value="somevalue1">somevalue</option>
 <option id="myid2" value="somevalue2">somevalue</option>
 <option id="myid3" value="somevalue3">somevalue</option>
</select>

<select name="mySelect" id="selectID">
 <option id="myid1" value="somevalue1">somevalue</option>
 <option id="myid2" value="somevalue2">somevalue</option>
 <option id="myid3" value="somevalue3">somevalue</option>
</select>

<select name="mySelect" id="selectID">
 <option id="myid1" value="somevalue1">somevalue</option>
 <option id="myid2" value="somevalue2">somevalue</option>
 <option id="myid3" value="somevalue3">somevalue</option>
</select>

<script>
    $('#selectID').each(function() {
        $(this).change(function() {
        var optionID = $('option:selected').attr('id');
        alert(optionID);
        });
   });

  </script>

Answer 1

有很多方法可以做到这一点。例如，对所有复选框使用相同的类，请尝试：

<select class="something" name="mySelect" id="selectID">
 <option id="myid1" value="somevalue1">somevalue</option>
 <option id="myid2" value="somevalue2">somevalue</option>
 <option id="myid3" value="somevalue3">somevalue</option>
</select>

<select class="something" name="mySelect" id="selectID">
 <option id="myid1" value="somevalue1">somevalue</option>
 <option id="myid2" value="somevalue2">somevalue</option>
 <option id="myid3" value="somevalue3">somevalue</option>
</select>

在jquery中：

    $(".something").change(function() {
        var optionID = $(this).children(":selected").attr("id");
        alert(optionID);
    });

Answer 2

简单地说，

$('#selectID').find('option').change(function(){
 alert($(this).attr('id'));
});

请记住，＃selectID必须是唯一的。

每个选择也更通用：

$('select').find('option').change(function(){
     alert($(this).attr('id'));
});

Answer 3

$('select[name="mySelect"]').each(function() {
  $(this).change(function() {
   var optionID = $('option:selected').attr('id');
    alert($(this).attr("class") + optionID);
  });
});

<select name="mySelect" id="selectID" class="1">
 <option id="myid1" value="somevalue1">somevalue</option>
 <option id="myid2" value="somevalue2">somevalue</option>
 <option id="myid3" value="somevalue3">somevalue</option>
</select>

<select name="mySelect" id="selectID" class="2">
 <option id="myid1" value="somevalue1">somevalue</option>
 <option id="myid2" value="somevalue2">somevalue</option>
 <option id="myid3" value="somevalue3">somevalue</option>
</select>

<select name="mySelect" id="selectID" class="3">
 <option id="myid1" value="somevalue1">somevalue</option>
 <option id="myid2" value="somevalue2">somevalue</option>
 <option id="myid3" value="somevalue3">somevalue</option>
</select>
<span id="result"></span>

如何从jquery中的所有3个相同的复选框中获取id

3 个答案: