select2 不是函数

Question

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

Answer 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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/> <script src="https://rawgit.com/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 .