解决select2 下拉选 clone后样式失效问题

Aaron莫言

已于 2022-11-04 13:52:05 修改

阅读量567

点赞数

分类专栏：前端文章标签： jquery javascript 前端

于 2022-11-04 13:42:01 首次发布

原文链接：https://blog.csdn.net/weixin_40010498/article/details/81902866

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<script src="jquery-3.1.1.min.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>
</html>