省市联动 js

Posted zhuyapeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了省市联动 js相关的知识,希望对你有一定的参考价值。

工作中见到这个省市联动代码,虽然很简单也能写出来,还是随便把它记录下来。

//省市联动
        function area(obj_id, area_pId, data_call_back) {
            if (area_pId == -1) return;

            $.ajax({

                type: GET,
                url: "/SysAdmin/Pages/tb_supplierAdd.aspx",
                data: { area_pId: area_pId },
                dataType: json,
                success: function (data) {

                    $("#" + obj_id + " option").remove();
                    //加默认记录
                    $("#" + obj_id).append("<option txt=‘请选择‘ value=‘-1‘>请选择</opetion>");
                    for (var i = 0; i < data.length; i++) {

                        $("#" + obj_id).append("<option txt=‘" + data[i].Value + "‘ value=‘" + data[i].Key + "‘>" + data[i].Value + "</opetion>");
                    }

                    if (data_call_back)
                        data_call_back(data);
                },
                error: function () {
                    alert("异常!");
                }

            });
        }

        $(function () {
            $("#Provice").change(function () {
                area("City", $(this).children(option:selected).val());
            });
            area("Provice", 0);
            $("#City").append("<option value=‘-1‘ txt=‘请选择‘>请选择</option>");
        });
    </script>
    <!--EndEdit1-->
</head>
<body>
    <form id="form1" runat="server">
        <%--<div style="padding: 10px;">
            <div style="float: left; margin-left: 10px;">
                <span>请选择省:</span><asp:DropDownList Width="140" class="DropDownList form-control" ID="provice" placeholder="请选择省" runat="server"></asp:DropDownList>
            </div>
            <input id="Key" style="width: 30%" class="TextBox form-control" onkeydown="SearchKey(event);" placeholder="请输入供应商名称,按回车搜索" title="供应商名称,按回车" />
        </div>--%>
        <div style="margin:10px">
            <div style="float:left;width:200px">
                <span style="width:30%;float:left;padding-top:8px">请选择省:</span><asp:DropDownList class="form-control" ID="Provice" runat="server" Width="60%"></asp:DropDownList>
            </div>
            <div style="float:left;width:200px">
                <span style="width:30%;float:left;padding-top:8px">请选择市:</span><asp:DropDownList class="form-control" ID="City" runat="server" Width="60%"></asp:DropDownList>
            </div>
            <input type="text" style="height:34px;color:#555;margin-left:15px;margin-right:10px;width:250px" id="Key" class="TextBox"  placeholder="请输入供应商名称" />
            <button  class="btn btn-default w-l-fd" type="button" id="SearchBt"  onclick="Search()">确定</button>
        </div>

 

以上是关于省市联动 js的主要内容,如果未能解决你的问题,请参考以下文章

省市区三级联动JS部分简单版

JS——省市二级联动

29_用js实现一个省市级联效果

js之select标签---省市联动小例子

省市区三级联动(js)在js中已预定好数据

省市区县街道四级联动下拉菜单