jquery插件chosen的重置
前段时间公司要求给每个表单做重置功能,当时遇到的问题就是这个插件下的select框的下拉框和框中已选项不能销毁,于是翻阅了很多文档资料,在此总结。
如下图,我需要点击重置按钮后,把框中一选择的值去掉,然后重新赋值,其中主要方法点下
//初始化选择框
$('#src_vlan_select').chosen({width: "100%"}).on('change',function(){}); //可以不加'.on()'
//销毁select 清除下拉列表的option,和已选择的option
$('#src_vlan_select').empty()
$('#src_vlan_select').chosen("destroy")
//重新给select的下拉框赋值
$('#src_vlan_select').append(html)
//让select的框中选定默认的值
$('#src_vlan_select').val(selected)
//再次初始化select组件
$('#src_vlan_select').chosen({width: "100%"})
下面是部分重置功能的代码,可以借鉴
vue框架下的select HTML代码
<select id="src_vlan_select" multiple class="form-control" >
<template v-for="(item,index) in src_listVlan">
<option :selected="isSelected(item,index)" :value="item.uuid" >
{{item.name}}
</option>
</template>
</select>
初始化select组件,并且监控组件的chang事件,并且取值
self.$nextTick(function(){
$('#src_vlan_select').chosen({width: "100%"}).on('change',function(evn,params){
if(params&¶ms.hasOwnProperty('selected')){
self.dataObj.src_vlan.push(params.selected);
}else if(params&¶ms.hasOwnProperty('deselected')){
for(var i=0;i<self.dataObj.src_vlan.length;i++){
if(self.dataObj.src_vlan[i] == params.deselected ){
self.dataObj.src_vlan.splice(i,1);
}
}
}
});
});
重置功能的具体代码(这个是我原工程的代码,看懂就好了)
扫描二维码关注公众号,回复:
2802524 查看本文章
"resetAction":function(){
let self = this
self.dataObj= utils.deepCopy(self.copy)
self.src_vlan_type = self.type
if(self.type == 'all' ){
self.dataObj.src_vlan = []
}
$('#src_vlan_select').empty()
$('#src_vlan_select').chosen("destroy")
let html=''
let list = self.src_listVlan
for(let name in list){
html += "<option value="+list[name].uuid+" >"+list[name].name+"</option>"
}
$('#src_vlan_select').append(html)
let selected = []
for(let name in list){
if($.inArray(list[name].uuid,self.dataObj.src_vlan)>=0){
selected.push(list[name].uuid)
}
}
$('#src_vlan_select').val(selected)
$('#src_vlan_select').chosen({width: "100%"})
},
版权声明:本文为博主原创文章,未经博主允许不得转载。https://mp.csdn.net/postedit/81705381