带有多个选择标记的jQuery select2

Question

I'm using jQuery Select2 2.1 and trying to apply it to multiple select tags with same id class. My code looks like this:

<select id="e1" style="width: 300px">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
    <option value="NY">New York</option>
</select>
...
<select id="e1" style="width: 300px">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
    <option value="NY">New York</option>
</select>

The javascript code is use is:

<script>
    $(document).ready(function() { $('#e1').select2(); });
</script>

The problem is that only the first select tag gets the proper select2 class. I don't know if the select2 allows this type of usage (i could not identify this information in documentation), but another options would be the increment the javascript function { $('#e1').select2(); } { $('#e1').select2(); } to permit { $('#e(1..999)').select2(); } { $('#e(1..999)').select2(); } , after i will adjust php code <select id="e<?php echo $i ?>" style="width: 300px"> , where $i is incremented.

How can i achieve this? Thanks.

Answer 1

Firstly, do you really need to have 2 selects with the same id?

Secondly, to match both, you can do $('[id="e1"]').select2(); - But you shouldn't imo.

Answer 2

Using multiple elements with the same ID is VERY bad practice. Use a class instead...that's what they're for.

HTML:

<select class="select2" style="width: 300px">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
    <option value="NY">New York</option>
</select>
...
<select class="select2" style="width: 300px">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
    <option value="NY">New York</option>
</select>

JavaScript:

$(document).ready(function() { $('.select2').select2(); });