實現下拉框聯動例子.

1.首先在ul中定義省份和城市查詢條件。

<ul id="dynamicCondition" style="display:none;">
	<li field="DynamicCondition.province" title="省份" ops="equal" edit="selectProvince" templet="#dict-province"  layVerify="" allowDel="false"></li>
	<li field="DynamicCondition.city" title="城市" ops="equal" edit="selectCity" templet="#dict-city" layVerify="" allowDel="false"></li>
</ul>
 

因為是級聯操作，條件直接有關聯關係，所以設定屬性allowDel=“false”。不然要考慮條件選擇時缺少省份或者城市時太複雜了。
然後因為是下拉框選擇，一般操作就是equal，所以設定ops=“equal” 儘量簡化，除去不必要的邏輯。
元件自帶的編輯器只有text，select，date。上面的selectProvince，selectCity是我們要擴充套件的編輯器。

2.擴充套件編輯器。

var editorProvince = dynamicCondition.createEditor("selectProvince");
  $.extend( editorProvince ,{
		createElement:function(item){
			var selectHtml;
			if($(item.templet).is("select")){
				selectHtml = $(item.templet).prop("outerHTML");
			}else{
				selectHtml = $(item.templet).html();
			}
			return $(selectHtml);
		}
	  ,getRequestText:function(ele){
		    return  ele.find("option:selected").text();
		}
  })
  
  var editorCity = dynamicCondition.createEditor("selectCity");
  $.extend( editorCity ,{
	  	createElement:function(item){
			var selJq = $("<select>");
			selJq.append("<option value=''></option>");
			return selJq;
		}
		,getRequestText:function(ele){
			return  ele.find("option:selected").text();
		}
  })
 

3.建立查詢元件例項。重點是在afterOpen中實現下拉框聯動繫結初始化。

var dc = dynamicCondition.create({
  		//通過容器選擇器傳入，也可以$("#dynamicCondition"),或者document.getElementById("dynamicCondition")
  		elem:"#dynamicCondition" 
	  	,tableId:"listTableId" 
		,conditionTextId:"#msg"
		,afterOpen:function(_dc){
			  //下拉框聯動
			  form.on('select(province)', function(data){
				  var params={province:data.value};
				  $.post("/#(appName)/demo/dynamicCondition/getCityList",params,function(data){
				        if(data.code == 0){
				        	var eleJq = _dc.getRowDivs("DynamicCondition.city")[0].eleJq;
				        	eleJq.html("<option value=''></option>");
				      	    $.each(data.otherData.cityList, function(key, val) {
				      	                  var option1 = $("<option>").val(val.value).text(val.label);
				      	                   eleJq.append(option1);
				      	    }); 
				      	  	form.render('select');
				        }
				    });
			  })
			  //如果省份有值，則需要初始化城市下拉框
			  var provinceVal =  _dc.getVal("DynamicCondition.province");
			  if(provinceVal){
				  var params={province:provinceVal};
				  $.post("/#(appName)/demo/dynamicCondition/getCityList",params,function(data){
				        if(data.code == 0){
				        	var eleJq = _dc.getRowDivs("DynamicCondition.city")[0].eleJq;
				        	eleJq.html("<option value=''></option>");
				      	    $.each(data.otherData.cityList, function(key, val) {
				      	                  var option1 = $("<option>").val(val.value).text(val.label);
				      	                   eleJq.append(option1);
				      	    }); 
				      	  	eleJq.val(eleJq.attr("oldVal"));
				      	  	form.render('select');
				        }
				  });
			  }
			  
  		}
	});
 

程式碼中需要注意的地方:
var provinceVal = _dc.getVal(“DynamicCondition.province”);
通過上面程式碼可以獲取彈出的條件查詢視窗中省份的值provinceVal。

var eleJq = _dc.getRowDivs(“DynamicCondition.city”)[0].eleJq;
通過上面程式碼可以獲取selectCity建立的ele物件。每行的div物件有快取編輯器建立的ele物件。
如果操作符是between，則會快取eleLeftJq和eleRightJq。

eleJq.val(eleJq.attr(“oldVal”));
eleJq.attr(“oldVal”)這個能獲取到值是因為預設的fillElement函式將值寫入了oldVal屬性。因為之前“城市”下拉框資料還沒有載入進去，所以$(ele).val(val.value);設定無效。當“城市”下拉框資料載入完成時想獲取原來的資料就可以通過oldVal屬性來獲取了。

/***
* 初始值填充DOM。這個方法只會在使用者點選查詢按鈕，彈出視窗渲染時，給對應查詢條件設定之前儲存的值。
* ele createElement 生成的物件
* val 值 格式{value:"",text:""}
*/
fillElement:function(ele, val){
	$(ele).val(val.value);
	$(ele).attr("oldVal",val.value);
}

4.設定初始條件。因為設定了 allowDel=“false” ，那麼就必須設定初始條件，否則這個條件就看不到了。

dc.setCondition([ ["DynamicCondition.province",null,""],["DynamicCondition.city",null,""]  ]);

到這裡下拉框聯動就實現了。
相關連結：
外掛原始碼：去碼雲下載 或者 去layui官網下載
體驗地址1：動態新增條件查詢Demo
體驗地址2：帶後臺的查詢demo
基於layui的動態新增條件查詢ui外掛
高階查詢元件dynamicCondition升級為v2.0.0版本（一）
高階查詢元件dynamicCondition升級為v2.0.0版本（二）