JS 实现列表与多选框选择

待我称王封你为后i 2022-08-13 01:59 213阅读 0赞

### 1功能预览 ###

![1412931059_9963.gif][]

### 2html代码 ###

### 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) {
    							var typeThreeName = ""
    							for (var i = 0; i < data.length; i++) {
    								typeThreeName += "<input οnclick=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) {
    			return false;
    		}
    		for (var i = 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) {
    			return false;
    		}
    		this.splice(dx, 1);
    	}
    	var subTypeName = [];
    	function clinkType(name) {
    		var index = subTypeName.indexOf(name)
    		if (index == -1) {
    			subTypeName.push(name);
    		} else {
    			subTypeName.baoremove(index);
    		}
    		$('#typeOneSubResult').html(subTypeName.join(","));
    	}

[1412931059_9963.gif]: https://img-my.csdn.net/uploads/201410/10/1412931059_9963.gif