c#使用js/PCASClass.js获取省市县三级联动
下载了PCASClass.js插件后就可以使用了。
1、引入文件 <script type="text/javascript" src="js/PCASClass.js"></script>
2、html文件
<dl>
<dt>所属地区</dt>
<dd id="cityform">
<select id="Province" name="Province" onchange="sech(this.id)" class="select" runat="server"></select>
<select id="City" name="City" onchange="sech(this.id)" class="select" runat="server"></select>
<select id="Area" name="Area" onchange="sech(this.id)" class="select" datatype="*" sucmsg=" " runat="server"></select>
<asp:HiddenField ID="s_sheng" runat="server" Value="" />
<asp:HiddenField ID="s_shi" runat="server" Value="" />
<asp:HiddenField ID="s_xian" runat="server" Value="" />
</dd>
</dl>
注:HiddenField是为了保存选择的省市县信息。
3、参数复制方法案例:
<script type="text/javascript">
new PCAS("ProvinceId","CityId")//通过ID省市二级联动,无默认值,无文字提示信息
new PCAS("ProvinceId","CityId","AreaId")//通过ID省市区三级联动,无默认,无文字提示信息
new PCAS("ProvinceName","CityName","AreaName")//通过NAME省市区三级联动,无默认值,无文字提示信息
new PCAS("Province=吉林省","City=长春市")//省市二级联动,有默认值,无文字提示
new PCAS("Province,请选择省份","City,请选择城市")//省市二级联动,无默认值,有文字提示信息
new PCAS("Province","City","Area")//省市区三级联动,无默认,无文字提示
new PCAS("Province=吉林省,请选择省份","City=松原市,请选择城市","Area=宁江区,请选择地区")//三级联动,有默认值,有文字提示信息
new PCAS(["Province=吉林省","请选择省份"],["City=松原市","请选择城市"],["Area=宁江区","请选择地区"])//三级联动,有默认值,有文字提示信息
</script>
以上选择一种就行,我用的是:
<script>
$(function () {
//初始化地区
new PCAS("Province,请选择省份", "City,请选择城市", "Area,请选择地区");
});
</script>
4、前端添加更改省市县时触发事件:
function sech(id) {
//省市改变时触发
var aa = document.getElementById(id);
if (id == "Province") {
var c = aa.selectedIndex;//获得改变后该省的索引号
document.getElementById("s_sheng").value = aa.options[c].text;//将选中的省的text赋值给HiddenField1的Value;
}
if (id == "City") {
var d = aa.selectedIndex;
document.getElementById("s_shi").value = aa.options[d].text;
}
if (id == "Area") {
var e = aa.selectedIndex;
document.getElementById("s_xian").value = aa.options[e].text;
}
}
5、后端获取省市县信息
string province = s_sheng.Value;
string city = s_shi.Value;
string area = s_xian.Value;
6、编辑已有信息时候,显示已经选择的省市县信息
<script>
$(function () {
var p = document.getElementById("s_sheng").value;
var c = document.getElementById("s_shi").value;
var a = document.getElementById("s_xian").value;
if (p != "" && c != "" && a != "") {
new PCAS(["Province="+p, "请选择省份"], ["City="+c, "请选择城市"], ["Area="+a, "请选择地区"])
}
});
</script>