异步加载 下拉框插件selectMania使用

在项目过程中，经常会出现加载页面因下拉框数据量过大，导致页面卡顿的情况，所有引入了select-mania插件
1、引入css样式和js文件，

 <link href="plug-in/select-mania/css/select-mania.css" rel="stylesheet" type="text/css">
<link href="plug-in/select-mania/css/themes/select-mania-theme-green.css" rel="stylesheet" type="text/css">
 <script src="plug-in/select-mania/js/select-mania.js"></script>

2、控件；此为编辑界面，如果后台有值，默认选中

<select name="orderDanwei"  >
	<c:if test="${not empty ldcOrderPage.orderDanwei }">
		<option selected="selected" value="${ldcOrderPage.orderDanwei}" >${orderDanweivalue}</option>
	</c:if>
</select>

3、后台取数据，这里发现selectMania

	var pcname2 = new Array();
	var jydw = $("select[name='orderDanwei']").val();		//用于判断当前页面是否有值，如果有值，在查询下拉框数据是，过滤掉页面值
			//onload 加载数据时，发现如果未给控件赋值，初始点击控件会为空-----onload时加载数据
	    	$.ajax({
	    		url : 'ldcOrderController.do?orderrecive_selectMania&type=cus',
	    		type : 'GET',
	    		dataType : 'JSON',
	    		cache : true,
	    		success : function(data) {		
	    			var option ="";
	    			for (var i = 0; i < data.length; i++) {
	    				if(data[i].id != wtr){
		    				option += "<option value='"+data[i].id+"'>"+data[i].text+"</option>";
	    				}
	    			}
    				$("select[name='orderDanwei']").append(option);		
    				
	    			$("select[name='orderDanwei']").selectMania({		
	    				    size: 'small',
	    		            themes: ['green'],		//样式
	    		            placeholder: '请选择',		
	    		            removable: true,		//是否可删除
	    		            search: true,		//搜索
	    		            width:'140px',
	    		            empty:true,
	    		            ajax:function(search, page, data, callback){		//异步加载ajax
	    		            	 $.ajax({
	    		            	        type: "GET", 
	    		            	        url: "ldcOrderController.do?orderrecive_selectMania&type=cus", 
	    		            	        dataType : 'JSON',
	    		            	        data: {
	    		            	            search: search, 	//search：当前搜索框中的值。
	    		            	            page: page, 		//page：请求的页码。
	    		            	            row:10				//row：行。
	    		            	   
	    		            	        }, 
	    		            	        success: function(html) {	//回调时数据必须是<option>1</option>形式，否则报错
	    		            	        	
	    		            	        	var option ="";
	    		            	        	for (var i = 0; i < html.length; i++) {
//		    		            	        	console.log(html[i]);
	    		        	    				if(html[i].id != wtr){

	    		            	        		option += "<option value='"+html[i].id+"'>"+html[i].text+"</option>";
	    		        	    				}
	    		                			}

	    		            	            callback(option);	//callback：成功之后的回调函数。
	    		            	        }
	    		            	    });

	    		
	    		            }
	    		      });
	    			//selectMania补丁--发现初始加载页面未选中，会默认选中第一个选项
	    			if(wtr == '' || wtr == undefined){		
	    				$("select[name='orderDanwei']").selectMania('clear');
	    			}
	    			
	    	
    	

4、发现提交时，如果未选中，会默认带入第一个选项到后台，这边在beforesubmit前写了个补丁如下：

	var orderDanweivalues = $("#up").find("select[name='orderDanwei']").selectMania('get');		//获取当前选中项
	if(orderDanweivalues.length == 0){		//控件bug 如果未选择，会默认带入第一个option
		$("select[name='orderDanwei']").html('');
	}

可用方法

-init：初始化方法。

$("select[name='orderDanwei").selectMania({__regexoperators___/*settings*/});
$("select[name='orderDanwei").selectMania("init", {__regexoperators___/*settings*/});

• update：在目标元素上更新插件。

$("select[name='orderDanwei").selectMania("update");

• destroy：销毁指定的select-mania下拉选择框。

$("select[name='orderDanwei").selectMania("destroy");

• check：这个方法只能在单一元素上使用，返回true表示目标元素上已经进行了初始化。

if($("select[name='orderDanwei").selectMania("check")) {
    // select-mania is initialized!
}

• get：这个方法只能在单一元素上使用，用于获取当前选择的值。

var values = $("select[name='orderDanwei']").selectMania("get");
// 也可以这样取值
$("select[name='orderDanwei']").val();

• set：这个方法只能在单一元素上使用，用于为下拉选择框设置新的值。

$("select[name='orderDanwei]").selectMania("set", [
    {
        value: "20", 
        text: "Value number twenty"
    }, 
    {
        value: "60", 
        text: "Value number sixty"
    }
]);

• clear：在目标元素上情况已选择的值，重置时使用。

$("select[name='orderDanwei']").selectMania("clear");

• 禁用

$("select[name='orderDanwei']").attr('disabled','disabled');