I have this html

 <div class="input-box">
        <select id="billing:country_id" class="validate-select" name="billing[country_id]" title="Country">
            <option value=""> </option>
        </select>
    </div>
    <div class="input-box">
        <select id="billing:region_id" class="validate-select" name="billing[region_id]" title="State">
            <option value=""> </option>
        </select>
    </div>

<script type="text/javascript">
    jQuery("#billing\\:country_id").select2({
        placeholder: "Select a Country"
    });

    jQuery("#billing\\:region_id").select2({
        placeholder: "Select State"
    });

    jQuery("#billing\\:country_id").change(function(){
        jQuery("#billing\\:region_id").select2('destroy'); 

        jQuery("#billing\\:region_id").select2({
            placeholder: "Select a State"
        });
    });
</script>

but when I try to change the country dropdown I have this error:

TypeError: jQuery(...).select2 is not a function

jQuery("#billing\:region_id").select2('destroy');

I have this html

 <div class="input-box">
        <select id="billing:country_id" class="validate-select" name="billing[country_id]" title="Country">
            <option value=""> </option>
        </select>
    </div>
    <div class="input-box">
        <select id="billing:region_id" class="validate-select" name="billing[region_id]" title="State">
            <option value=""> </option>
        </select>
    </div>

<script type="text/javascript">
    jQuery("#billing\\:country_id").select2({
        placeholder: "Select a Country"
    });

    jQuery("#billing\\:region_id").select2({
        placeholder: "Select State"
    });

    jQuery("#billing\\:country_id").change(function(){
        jQuery("#billing\\:region_id").select2('destroy'); 

        jQuery("#billing\\:region_id").select2({
            placeholder: "Select a State"
        });
    });
</script>

but when I try to change the country dropdown I have this error:

TypeError: jQuery(...).select2 is not a function

jQuery("#billing\:region_id").select2('destroy');

• javascript
• jquery
• jquery-select2

Share Improve this question Follow edited Apr 13, 2017 at 11:55 Robert asked Apr 13, 2017 at 11:31 RobertRobert 81233 gold badges1919 silver badges4949 bronze badges 12

• 1 Not included select2.js ? – Tushar Commented Apr 13, 2017 at 11:31
• is included, the country select is work okay, but when there exist state dropdown I see this error – Robert Commented Apr 13, 2017 at 11:34
• make sure you import select2.js before the code. and remove \\ from #billing\\:region_id & #billing\\:country_id – Alaa M. Jaddou Commented Apr 13, 2017 at 11:35
• if I remove this will not work, the ID will can't be selected – Robert Commented Apr 13, 2017 at 11:40
• Use jquery function first to encapsulate your whole code. e.g $(function(){//your remaining code write here.}) and let me know the status. – Ataur Rahman Munna Commented Apr 13, 2017 at 11:42

 |  Show 7 more ments

1 Answer 1

Sorted by: Reset to default 1

I didn't see any error except that your whole function should be encapsulated inside jquery.To show demo, i just added 3 options.

$(function(){
    $("#billing\\:country_id").select2({
        placeholder: "Select a Country"
    });

    $("#billing\\:region_id").select2({
        placeholder: "Select State"
    });

    $("#billing\\:country_id").change(function(){
        $("#billing\\:region_id").select2('destroy'); 

        $("#billing\\:region_id").select2({
            placeholder: "Select a State"
        });
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit./select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit./select2/select2/master/dist/js/select2.js"></script>

<div class="input-box">
    <select id="billing:country_id" class="validate-select" name="billing[country_id]" title="Country">
        <option value=""> </option>
		
		<option value="1">option 1 </option>
		<option value="2">option 2 </option>
		<option value="3">option 3 </option>
    </select>
</div>
<div class="input-box">
    <select id="billing:region_id" class="validate-select" name="billing[region_id]" title="State">
        <option value=""> </option>
		<option value="1">option 1 </option>
		<option value="2">option 2</option>
		<option value="3">option 3</option>
    </select>
</div>

Here is the JsFiddle Link.