您的位置:首页 > Web前端 > JavaScript

js三级联动代码

2016-01-05 15:28 567 查看
1、html代码

<div class="col-md-8" style="margin-left: 100px;">
<label class="col-sm-1 control-label">企业名称</label>
<div class="col-sm-3">
<select id="enterpriseName" name="enterpriseName" style="width:200px;height:35px;" onchange="getEnterpriseName(this)" >

</select>
</div>

<label class="col-sm-1 control-label">楼号</label>
<div class="col-sm-3">
<select id="floorNum" name="floorNum" style="width:200px;height:35px;" onchange="getEnterpriseNum(this)" >

</select>
</div>

<label class="col-sm-1 control-label">楼层</label>
<div class="col-sm-3">
<select id="floorLayer" name="floorLayer" style="width:200px;height:35px;" onchange="getEnterpriseFloor(this)" >

</select>
</div>
</div>
2、js代码

var enterpriseName=$("#enterpriseName");
var floorNum=$("#floorNum");
var floorLayer=$("#floorLayer");
var shopName=$("#shopName");

//info为下拉框级别,id为下拉框option的value值
function getEnterpriseInfo(info,id){
$.ajax({
type : "post",
async : false, //同步执行
url : "getJson_StoreActivity_getEnterpriseInfo",
data: {positionInfo:info,positionId:id},
dataType : "json", //返回数据形式为json
success : function(data) {
$.each(data.resultList, function(key, val) {
// alert("级别:"+data.positionInfo);
if(data.positionInfo=='1'){
enterpriseName.append("<option value=\"0\" >--请选择企业名称--</option>");
enterpriseName.append('<option value="' + val.siteId + '">' + val.siteName + '</option>');
}else if(data.positionInfo=='2'){
floorNum.append("<option value=\"0\" >--请选择楼号--</option>");
floorNum.append('<option value="' + val.buildingId + '">' + val.buildingName + '</option>');
}else if(data.positionInfo=='3'){
floorLayer.append("<option value=\"0\" >--请选择楼层--</option>");
floorLayer.append('<option value="' + val.floorId + '">' + val.floorName + '</option>');
}else if(data.positionInfo=='4'){
shopName.append("<option value=\"0\" >--请选择店铺名称--</option>");
shopName.append('<option value="' + val.storeId + '">' + val.storeName+"-"+val.realName + '</option>');
}
});
//去除重复option的value值
$("select option").each(function() {
text = $(this).text();
if($("select option:contains("+text+")").length > 1)
$("select option:contains("+text+"):gt(0)").remove();
});
},
error : function() {
alert("请求出错!");
}
});
}
//加载完成后,默认查询第一个下拉框内容
getEnterpriseInfo("1",null);

function getEnterpriseName(obj){
floorNum.find("option").remove();
floorLayer.find("option").remove();
shopName.find("option").remove();
getEnterpriseInfo("2",enterpriseName.val());
}

function getEnterpriseNum(obj){
floorLayer.find("option").remove();
shopName.find("option").remove();
getEnterpriseInfo("3",floorNum.val());
}

function getEnterpriseFloor(obj){
shopName.find("option").remove();
getEnterpriseInfo("4",floorLayer.val());
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: