jQuery实现的省市县三级联动菜单效果完整实例

2020-05-18 08:59:25易采站长站整理

createSelect : function(){
arrySheng = this.strSheng.split('|');
arryShi = this.strShi.split('|');
arryXian = this.strXian.split('|');
$(this.slt_sheng)[0].options.add(new Option("请选择","-1"));
$(this.slt_shi)[0].options.add(new Option("请选择","-1"));
$(this.slt_xian)[0].options.add(new Option("请选择","-1"));
areaSelect.bindSheng();
areaSelect.showSelect();
},
returnText : function(){ //返回选择的Text
var s1= $(this.slt_sheng).find("option:selected").text();
var s2= $(this.slt_shi).find("option:selected").text();
var s3= $(this.slt_xian).find("option:selected").text();
if(s3 != "请选择" && s2 != "请选择" && s1 != "请选择")
{
$("span[id$='AreaText']",window.parent.document).html(s1 + "|" + s2 + "|" + s3);
}
if(s1 != "请选择" && s2 != "请选择" && s3 == "请选择")
{
$("span[id$='AreaText']",window.parent.document).html(s1 + "|" + s2);
}
if(s1 != "请选择" && s2 == "请选择" && s3 == "请选择")
{
$("span[id$='AreaText']",window.parent.document).html(s1);
}
},
returnValue : function(){ //返回选择的Value
var s1= $(this.slt_sheng).find("option:selected").val();
var s2= $(this.slt_shi).find("option:selected").val();
var s3= $(this.slt_xian).find("option:selected").val();
if(s3 != "-1" && s2 != "-1" && s1 != "-1")
{
$("span[id$='AreaValue']",window.parent.document).html(s1 + "|" + s2 + "|" + s3);
}
if(s1 != "-1" && s2 != "-1" && s3 == "-1")
{
$("span[id$='AreaValue']",window.parent.document).html(s1 + "|" + s2);
}
if(s1 != "-1" && s2 == "-1" && s3 == "-1")
{
$("span[id$='AreaValue']",window.parent.document).html(s1);
}
}
};
areaSelect.showSelect = function()//显示select控件和添加事件
{
$("body").append(areaSelect.slt_sheng);
$("body").append(areaSelect.slt_shi);
$("body").append(areaSelect.slt_xian);
$(areaSelect.slt_sheng).change(function(){
areaSelect.bindShi(this.value);
areaSelect.returnText();
areaSelect.returnValue();
});
$(areaSelect.slt_shi).change(function(){
areaSelect.bindXian(this.value);
areaSelect.returnText();
areaSelect.returnValue();
});
$(areaSelect.slt_xian).change(function(){
areaSelect.returnText();
areaSelect.returnValue();
});
}
areaSelect.bindSheng = function() //绑定省
{