使用多个相同的下拉列表 ID，但第二个下拉列表不会触发 onchange 事件

Question

>View

//first dropdown
<select id="dropdown_change" type="first_dropdown">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>
//second dropdown
<select id="dropdown_change" type="second_dropdown">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

.JS

$("#dropdown_change").change(function() {
    var type = $(this).attr("type");
    alert(type);
});

当我尝试选择第一个下拉列表时，alert（） 工作正常，但问题是，第二个下拉列表不会触发 alert（）。这两个下拉列表位于同一视图中。如何解决这个问题？

Answer 1

这是因为一个 id 值只能给一个 HTML 元素，换句话说，多个元素不能在同一页面上具有相同的 id 值。类值可以赋予一个或多个 HTML 元素，通常属于同一类型。

尝试以下代码

视图

//first dropdown
<select class="dropdown_change" type="first_dropdown">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>
//second dropdown
<select class="dropdown_change" type="second_dropdown">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

.JS

$(".dropdown_change").change(function() {
    var type = $(this).attr("type");
    alert(type);
});

Answer 2

id显示仅对页面中的 1 个元素是唯一的。尝试为两个dropdown添加一个class，然后它应该可以工作。

$(".dropdown").change(function() {
    var type = $(this).attr("type");
    alert(type);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//first dropdown
<select id="dropdown_change" class="dropdown" type="first_dropdown">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>
//second dropdown
<select id="dropdown_change" class="dropdown" type="second_dropdown">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

Answer 3

属性 ID 在文档中必须是唯一的。如果您有多个具有相同 id 的元素，则该 id 将始终引用文档中第一个匹配的元素。改为尝试类：

$(".dropdown_change").change(function() {
    var type = $(this).attr("type");
    alert(type);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dropdown_change" type="first_dropdown">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>
<select class="dropdown_change" type="second_dropdown">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

Answer 4

我喜欢数据-* 属性 （https://www.w3schools.com/tags/att_global_data.asp）

    $(".dropdown").change(function() {
        var type = $(this).attr("data-type");
        alert(type);
    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select class="dropdown" data-type="first">
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
    </select>
    <select class="dropdown" data-type="second">
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
    </select>