javascript - select2 is not a function - Stack Overflow-369IT编程

admin管理员组
文章数量:1022623

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

Share Improve this question edited Apr 13, 2017 at 11:55 asked Apr 13, 2017 at 11:31 Robert 8123 gold badges19 silver badges49 bronze badges

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.

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

Share Improve this question edited Apr 13, 2017 at 11:55 asked Apr 13, 2017 at 11:31 Robert 8123 gold badges19 silver badges49 bronze badges

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.

本文标签： javascriptselect2 is not a functionStack Overflow

版权声明：本文标题：javascript - select2 is not a function - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745523752a2154431.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - select2 is not a function - Stack Overflow

1 Answer 1

1 Answer 1

更多相关文章