select2不是一个函数

Question

我有这个HTML

future2

但是当我尝试更改国家/地区下拉列表时出现此错误：

TypeError：jQuery（...）。select2不是函数

的jQuery（＆＃34; #billing \：REGION_ID＆＃34）。SELECT2（＆＃39;破坏＆＃39）;

Answer 1

我没有看到任何错误，只是你的整个函数应该封装在jquery里面。为了演示demo，我只添加了3个选项。

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

这是JsFiddle Link。