JS实现列表与多选框选择附预览动画

1功能预览

2html代码

<span>
<tr>
<td><imgonclick="addType()"src="${msUrl}/images/logo/add.png">产品范围：</td>
<td><selectid="selectTypeOne"class="easyui-combobox"data-options="required:true">
<option>一级分类</option>
</select><selectid="selectTypeTwo"class="easyui-combobox"data-options="required:true">
<optionselected="selected">全部</option>
</select></td>
</tr>
<trheight="20px">
<td></td>
<tdid="typeThree"></td>
</tr>
<trheight="30px">
<td></td>
<td><spanid="typeOneResult"></span><spanid="typeOneSubResult"></span>
<hr/></td>
</tr>
</span>

 3js代码

$("#selectTypeOne").combobox({
url:config.urlMap.typeList,
valueField:"name",
textField:"name",
required:true,
width:"100",
onSelect:function(row){
typeName1=row.name
$("#typeThree").html("");
$("#typeOneResult").html("");
$("#typeOneSubResult").html("");
subTypeName=[];
$("#selectTypeTwo").combobox({
url:config.urlMap.typeList+"?parent="+row.id,
valueField:"name",
textField:"name",
width:"100",
required:true,
onSelect:function(row){
typeName2=typeName1+">"+row.name;
$.getJSON(config.urlMap.typeList+"?parent="+row.id,function(data){
vartypeThreeName=""
for(vari=0;i<data.length;i++){
typeThreeName+="<inputonclick=clinkType(\""+data[i].name+"\")name="typeThree"value="+data[i].name+"type="checkbox">"+data[i].name
}
$("#typeThree").html(typeThreeName);
$("#typeOneResult").html(typeName2+">");
$("#typeOneSubResult").html("");
subTypeName=[];
});
}
})

}
});
})
//删除下标元素方式一
Array.prototype.remove=function(dx){
if(isNaN(dx)||dx>this.length){
returnfalse;
}
for(vari=0,n=0;i<this.length;i++){
if(this[i]!=this[dx]){
this[n++]=this[i]
}
}
this.length-=1
}
//删除数组元素方式二
Array.prototype.baoremove=function(dx){
if(isNaN(dx)||dx>this.length){
returnfalse;
}
this.splice(dx,1);
}
varsubTypeName=[];
functionclinkType(name){
varindex=subTypeName.indexOf(name)
if(index==-1){
subTypeName.push(name);
}else{
subTypeName.baoremove(index);
}
$("#typeOneSubResult").html(subTypeName.join(","));
}