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（）。这两个下拉菜单位于同一视图。如何解决这个问题？

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个元素是唯一的。尝试将class都添加到两个dropdown中，这样就可以了。

$(".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将始终引用文档中的第一个匹配元素。请尝试使用class：

$(".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>

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

4 个答案: