首先,二级联动,还是多级联动小伙伴们不要怕,其实很简单。
首先,理清思路:
- 首先第一个页面,肯定是进来就需要加载的
- 然后通过触发第一个事件,一般都是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>