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组件，并且监控组件的change事件，并且取值

self.$nextTick(function(){$('#src_vlan_select').chosen({width: "100%"}).on('change',function(evn,params){if(params&&params.hasOwnProperty('selected')){self.dataObj.src_vlan.push(params.selected);}else if(params&&params.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);}}}});});

重置功能的具体代码（这个是我原工程的代码，看懂就好了）

"resetAction":function(){let self = thisself.dataObj= utils.deepCopy(self.copy)self.src_vlan_type = self.typeif(self.type == 'all' ){self.dataObj.src_vlan = []}$('#src_vlan_select').empty()$('#src_vlan_select').chosen("destroy")let html=''let list = self.src_listVlanfor(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%"})},

版权声明：本文为博主原创文章，未经博主允许。/postedit/81705381