Search code examples
htmljqueryjquery-select2smarty

select2 4.0.13 messed up my drop-down options

So am facing an issue when I upgraded my select2 library from 4.0.3 to 4.0.13, what is happening is my countries drop-down options got messed up.

This is my HTML (am using PHP smarty template):

<div class="form-group clear">
    <label for="countryselect" class="col-md-3">
          Country
    </label>
    <div class="col-md-6 countrySelect" style="position: relative;z-index:9999;">
       <select id="country" class="form-control" name="country">
          <option {if $request.country==""}selected{/if} value="">Select a Country</option>
          {foreach from=$countries item=country key=countryKey}
             <option id="{$country.class}" value="{$countryKey}" {if $request.country == $countryKey} selected="selected" {/if}>{$country.name}</option>
          {/foreach}
       </select>
    </div>
</div>

This is how am calling select2 on this select section :

$('select[id=country').select2();

In 4.0.3 this is the dropdown:

enter image description here

In 4.0.13 this happened (all options after United States became Mexico till the end):

enter image description here

Can you please guide me on how to resolve this issue. Thanks.

Solution

  • I solved this issue by debugging the id="{$country.class}" and apparently all had the same id which gave all countries as Mexico so i just changed the variable and it worked great. Just to mention again this was working with the same id in select2 library 4.0.3 but when i upgraded the library it broke it down.

    Thanks goes to @r_a_f for pointing it out in the comment.