Question

例如，我有几个下拉列表

<select id="selectList">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
</select>
<select id="selectList">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
</select>

所以现在我想提醒每个列表的选定值，我应该怎么做，因为我无法理解如何做到这一点。

这是我的代码段：

 $(document).ready(function() {
     $('#selectList').change(function () {
         if ($(this).val() == 0)
             alert("call the do something function on option 0");
         if ($(this).val() == 1)
             alert("call the do something function on option 1");
     });
 });

Answer 1

使用class代替id，如下所示：

HTML（请注意，我更改了类的选择ID）：

<select class="selectList">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
</select>
<select class="selectList">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
</select>

Javascript（与HTML相同，更改了.class的#id）：

 $(document).ready(function() {
     $('.selectList').change(function () {
         if ($(this).val() == 0)
             alert("call the do something function on option 0");
         if ($(this).val() == 1)
             alert("call the do something function on option 1");
     });
 });

工作示例：

＆＃13;

$(document).ready(function() {
     $('#selectList').change(function () {
         if ($(this).val() == 0)
             alert("call the do something function on option 0");
         if ($(this).val() == 1)
             alert("call the do something function on option 1");
     });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectList">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
</select>
<select id="selectList">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
</select>

＆＃13;

Answer 2

您应该在DOM中为元素使用唯一ID。但是在你的情况下，你可以把它变成一个类，＆＃13; ＆＃13; $（document）.ready（function（）{＆＃13; $（＆＃39; .selectList＆＃39;）。change（function（）{＆＃13; if（$（this）.val（）== 0）＆＃13; 警告（＆＃34;在选项0和＃34上调用do something函数;）;＆＃13; if（$（this）.val（）== 1）＆＃13; 警告（＆＃34;在选项1和＃34上调用do something函数;）;＆＃13; }）;＆＃13; }）;＆＃13; ＆lt; script src =＆＃34; https：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"＆gt;＆lt; / script＆gt;＆＃13; ＆lt; select class =＆＃34; selectList＆＃34;＆gt;＆＃13; ＆lt; option value =＆＃34; 0＆＃34;＆gt; Value 0＆lt; / option＆gt;＆＃13; ＆lt;选项值=＆＃34; 1＆＃34;＆gt;值1＆lt; /选项＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆lt; select class =＆＃34; selectList＆＃34;＆gt;＆＃13; ＆lt; option value =＆＃34; 0＆＃34;＆gt; Value 0＆lt; / option＆gt;＆＃13; ＆lt;选项值=＆＃34; 1＆＃34;＆gt;值1＆lt; /选项＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆＃13; ＆＃13;

Answer 3

每个ID的

element必须为unique。您可以使用select选择器将同一个类分配给class和绑定事件

<select class="select">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
</select>
<select class="select">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
</select>

$(document).ready(function() {
  $('.select').change(function () {
   if ($(this).val() == "0")
     alert("call the do something function on option 0");
   if ($(this).val() == "1")
      alert("call the do something function on option 1");
   });
});

Answer 4

您必须为select和同一个类名使用不同的id名称，然后才能执行此操作。

<select class="selectlist" id="selectList1">
   <option value="0">Value 0</option>
   <option value="1">Value 1</option>
</select>
<select class="selectlist"  id="selectList2">
   <option value="0">Value 0</option>
   <option value="1">Value 1</option>
</select>

$(document).ready(function() {
   $('.selectList').change(function () {
     if ($(this).val() == 0)
         alert("call the do something function on option 0");
     if ($(this).val() == 1)
         alert("call the do something function on option 1");
   });
});

Answer 5

在您的情况下，您可以通过使用相同的name属性来分别获取每个值或事件来执行类似的操作。

var lists = document.getElementByClassName('select') //return all elements with this class name

// using index can be accessed seprately each
alert($(lists[0]).val())
alert($(lists[1]).val())

jquery从具有相同ID的多个下拉列表中获取选定值

5 个答案: