下拉框中可以实现复选框

(1)要实现的界面形式如下:

下拉框中可以实现复选框_第1张图片

下面是jsp页面中的写法:

     
                
					
						
					
					
							  
							
							<%--
							 
					     	  
                            --%>
							
							*
							
					
				

在同一个jsp页面中对这个复选框进行传值:

	$(function(){
	 //初始化多选复选框  
	 initCombobox('category');//这是品类的id,
	});
	
	//参数:id  控件id
	function initCombobox(id){
		var value = "";  
		//加载下拉框复选框  
		$('#'+id).combobox({  
			url:'xxxController.do?heheSelect', //后台获取下拉框数据的url  
			method:'post',  
			panelHeight:200,//设置为固定高度,combobox出现竖直滚动条  
			valueField:'value',  
			textField:'text',  
			multiple:true,  
			formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法  
				var opts = $(this).combobox('options');
				debugger;//这是在debug模式下的时候运行到这里后就会出现
				return '' + row[opts.textField]  
			},  
			onLoadSuccess: function () {  //下拉框数据加载成功调用
				var opts = $(this).combobox('options');  
				var target = this;  
				var values = $(target).combobox('getValues');//获取选中的值的values  
				$.map(values, function (value) {
					var el = opts.finder.getEl(target, value);  
					el.find('input.combobox-checkbox')._propAttr('checked', true);
				})  
			},  
			onSelect: function (row) { //选中一个选项时调用
				var opts = $(this).combobox('options');  
				//获取选中的值的values  
				$("#"+id).val($(this).combobox('getValues'));  

			   	//设置选中值所对应的复选框为选中状态
				$("input[name='" + row[opts.valueField] + "']").attr("checked", true);
			},  
			onUnselect: function (row) {//不选中一个选项时调用
				var opts = $(this).combobox('options');  
				//获取选中的值的values  
				$("#"+id).val($(this).combobox('getValues'));
				
				//取消选中值岁对应的复选框选中状态
				$("input[name='" + row[opts.valueField] + "']").attr("checked", false) 
			}  
		});  
	} 

上述代码中的URL地址,表示在xxxController中有xxxSelect的相关方法来获取下拉框中的值。

 

 

你可能感兴趣的:(java)