asp.net

c#使用js/PCASClass.js获取省市县三级联动

2022-03-20

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>

省市县三级联动.png


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>