二級聯動,多級聯動
阿新 • • 發佈:2018-11-29
首先,二級聯動,還是多級聯動小夥伴們不要怕,其實很簡單。
首先,理清思路:
- 首先第一個頁面,肯定是進來就需要載入的
- 然後通過觸發第一個事件,一般都是select寫 聯動,然後通過事件方法將引數(二級需要的條件)傳送給下一個 需要用的地方(需要展示的地方)
上程式碼:注意$(function(){ })這個方法裡是頁面在載入的時候就需要載入的方法 通常是一級
$(function(){ //應用 $.ajax({ url: "/modelServer/loadApplication", //後臺裡的方法名稱 type: "post", dataType: "json", contentType: "application/json", traditional: true, success: function (data) { if(data != null && data.length > 0){ for(var i=0;i<data.length;i++){ $("#domainList").append("<option value='"+data[i].applicationID+"'>"+data[i].applicationName+"</option>"); } } }, error: function (msg) { layer.alert("伺服器出錯了!"); } }); });
有了一級,現在我們的需求就是選擇 一級 顯示對應的二級 所以我們要在一級 設定一個onchange事件叫做 firstSel()這個事件就不能放在$(function(){ }); 要放在這個方法外面,因為我們不可能在載入頁面的時候就將 二級 加載出來
<div class="row cl"> <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>應用名稱</label> <div class="formControls col-xs-8 col-sm-9"> <select class="select-box" id="domainList" name="domainId" onchange="firstSel();"> <option value="0">請選擇</option> </select> </div> </div>
下面是firstSel()方法
function firstSel() { $("#tagImageId").empty(); var applicationId = $('#domainList option:selected').val(); //模型 $.ajax({ url: "/modelServer/loadModel", //後臺裡的方法名稱 type: "post", data:{"applicationId":applicationId}, traditional: true, success: function (data) { if(data != null && data.length > 0){ for(var i=0;i<data.length;i++){ $("#tagImageId").append("<option value='"+data[i].modelID+"'>"+data[i].modelName+"</option>"); } }else{ $("#tagImageId").append("<option value='-1'>"+"-暫無關聯的應用-"+"</option>"); } }, error: function (msg) { layer.alert("伺服器出錯了!"); } }); }
然後下面是二級標籤
<div class="row cl">
<label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>模型名稱:</label>
<div class="formControls col-xs-8 col-sm-9">
<select class="select-box" id="tagImageId" name="tagImageId">
</select>
</div>
</div>