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

Question

查看

//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()。这两个下拉菜单处于同一 View 。如何解决这个问题？

Answer 1

这是因为一个 id 值只能赋予一个 HTML 元素，换句话说，同一页面上多个元素不能具有相同的 id 值。class 值可以赋予一个或多个 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);
});