在jquery中动态获取select id

Question

我有以下HTML代码

 <select id="example1">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>

<select id="example2">
    <option id="1">one</option>
    <option id="2">two</option>
    <option id="3">three</option>
    <option id="4">four</option>
</select>

并让jquery更改调用代码

    $("#example1").on('change', function () {
alert($(this).val());
  });

      $("#example2").on('change', function () {
alert($(this).val());

}）;

而不是静态传递select id，我想在jquery中动态传递它。像一个改变功能来处理两个选择。我怎样才能做到这一点？

Answer 1

将class添加到select元素并将处理程序绑定到类。

$('.selectexample').on('change', function() {
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="example1" class="selectexample">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">four</option>
</select>

<select id="example2" class="selectexample">
  <option id="1">one</option>
  <option id="2">two</option>
  <option id="3">three</option>
  <option id="4">four</option>
</select>

Answer 2

您可以使用select作为选择器，当您的<select>个元素发生变化时，它会触发：

// When a <select> element is changed
$('select').on('change', function () {
     // Do work
     alert($(this).val());
});

或者如果您需要更具体，您只能定位具有以＆＃34开头的ID属性的元素;示例＆＃34;使用jQuery "starts-with" selector：

$('[id^="example"]').on('change',function(){
     alert($(this).val());
});

示例

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="example1">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">four</option>
</select>

<select id="example2">
  <option id="1">one</option>
  <option id="2">two</option>
  <option id="3">three</option>
  <option id="4">four</option>
</select>
<script>
  $(function() {
    $('select').on('change', function() {
      alert($(this).attr('id') + ' has ' + $(this).val() + ' selected!');
    });
  });
</script>

＆＃13;

＆＃13;

＆＃13;