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>