CODEWITHSUNDEEP
javascript
LearnProgramming
LearnProgramming

Reputation: 806

Using multiple same dropdown id but the second dropdown onwards does not trigger onchange events

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);
});

When I try to select the first dropdown, the alert() works fine but the problem is, the second dropdown does not trigger the alert(). These 2 dropdowns are at the same view. How to solve this problem?

Upvotes: 0

Views: 1133

Answers (4)

SJ_OWOW
SJ_OWOW

Reputation: 182

I love data-* Attributes (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>

Upvotes: 1

Mamun
Mamun

Reputation: 68933

The attribute id must be unique in a document. If you have multiple elements with same id, that id will always refer to the first matched element in the document. Try class instead:

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

Upvotes: 1

j.ian.le
j.ian.le

Reputation: 207

id show be unique to only 1 element in a page. Try adding a class to both dropdown then it should work.

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

Upvotes: 1

Jayson
Jayson

Reputation: 1109

This is because an id value can be given to only one HTML element, in other words, multiple elements cannot have the same id value on the same page. class value can be given to one or more HTML elements, usually of the same type.

Try below code

View

//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);
});

Upvotes: 1

Related Questions