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&&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 = 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%"})
    	},

jquery插件chosen 选择框无法重置

jquery插件chosen的重置

猜你喜欢