select2 下拉选 clone后无法使用

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40010498/article/details/81902866

select2 下拉选 clone后无法使用

源码:

<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />          
<script src="select2.js"></script>
<script type="text/javascript">
//页面加载完成后初始化select2控件
$(function () {
    //初始化select2
    $("#area").select2();
    var i=0;
    //点击克隆select2下拉选
    $("#add").click(function(){
        //销毁select2
        $("select").select2("destroy");
        //select2销毁不彻底,导致克隆后无法使用,需要把select2其他属性清理彻底这样才可以不影响克隆后的select2
        $("select").removeAttr("data-select2-id tabindex aria-hidden");
        $("option").removeAttr("data-select2-id");
        var ids="AA"+i++;
        //克隆后需要附上新的id值,赋值select2初始化会有问题
        var newSel=$("#area").clone().attr("id",ids);
        $("body").append(newSel);
        $("select").select2();
    });
});
</script>
</head>
<body>
<span>区域:</span>
<select id="area"  style="width:70px">
     <option value="0"></option>
    <option value="1">珠海</option>
    <option value="2">深圳</option>
    <option value="3">澳门</option>
    <option value="4">香港</option>
</select>

<input type="button" value="新增" id="add">

</body>
展开阅读全文

没有更多推荐了,返回首页