省市联动 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=" 30%" class="TextBox form-control" onkeydown="SearchKey(event);" placeholder="请输入供应商名称,按回车搜索" title="供应商名称,按回车" />
        </div>--%>
        <div style="margin:10px">
            <div style="float:left;200px">
                <span style="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;200px">
                <span style="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;250px" id="Key" class="TextBox"  placeholder="请输入供应商名称" />
            <button  class="btn btn-default w-l-fd" type="button" id="SearchBt"  onclick="Search()">确定</button>
        </div>
原文地址:https://www.cnblogs.com/zhuyapeng/p/5636347.html