jq 地区（省市县区）联动菜单

标签：

<pre name="code" class="html"><pre name="code" class="php">4、地区数据下载地址http://download.csdn.net/detail/u011064186/7690089

3、ajax 部分

public function actionAjax()
	{
            $id = $_GET['pid'];
            $sql = "select code,name from area where parentId = $id";
            $arr = Yii::app()->db->createCommand($sql)->queryAll();
            $arr = json_encode($arr);
            print_r($arr);
	}

2、html 部分

<span>
    <select name="province1" id="province1">
        <option value="-1">请选择</option>
        <option value="11">北京市</option>
        <option value="12">天津市</option>
        <option value="13">河北省</option>
        <option value="14">山西省</option>
        <option value="15">内蒙古自治区</option>
        <option value="21">辽宁省</option>
        <option value="22">吉林省</option>
        <option value="23">黑龙江省</option>
        <option value="31">上海市</option>
        <option value="32">江苏省</option>
        <option value="33">浙江省</option>
        <option value="34">安徽省</option>
        <option value="35">福建省</option>
        <option value="36">江西省</option>
        <option value="37">山东省</option>
        <option value="41">河南省</option>
        <option value="42">湖北省</option>
        <option value="43">湖南省</option>
        <option value="44">广东省</option>
        <option value="45">广西壮族自治区</option>
        <option value="46">海南省</option>
        <option value="50">重庆市</option>
        <option value="51">四川省</option>
        <option value="52">贵州省</option>
        <option value="53">云南省</option>
        <option value="54">西藏自治区</option>
        <option value="61">陕西省</option>
        <option value="62">甘肃省</option>
        <option value="63">青海省</option>
        <option value="64">宁夏回族自治区</option>
        <option value="65">新疆维吾尔自治区</option>
        <option value="71">台湾省</option>
        <option value="81">香港特别行政区</option>
        <option value="82">澳门特别行政区</option>
    </select>
</span>
<span id="c" style='display: none'>
    <label for="city-proper">市</label>
    <select name="city1" id="city">

    </select>
</span>
<span id="co"style='display: none'>
    <label for="city-proper">县区</label>
    <select name="county1" id="county">

    </select>
</span>
<span id="to" style='display: none'>
    <label for="city-proper">乡镇(街道)</label>
    <select name="town1" id="town">

    </select>
</span>

<script>
    $(document).ready(function() {
        $('#province1').bind('change', function() {
            $("#c").css('display', 'inline-block');

            $("#to").css('display', 'none');
            $("#co").css('display', 'none');
            var pid = $(this).val();
            if (pid == '-1') {
                $("#c").css('display', 'none');
            }

            $.ajax({
                type: "get",
                url: "/index.php/site/ajax",
                data: {
                    pid: pid,
                },
                success: function(json) {
                    //alert(json);
                    var data = eval('(' + json + ')');//json转化为对象
                    var str = "";
                    for (var i = 0; i < data.length; i++) {
                        // alert(data[i].name);
                        console.log(str += "<option value=" + data[i].code + ">" + data[i].name + "</option>");
                        $("#city").empty();

                        $("#city").append("<option value=" + '-1' + ">" + '请选择' + "</option>");
                        $("#city").append(str);

                    }
                }
            });

        });
    });
    $(document).ready(function() {
        $('#city').bind('change', function() {
            $("#co").css('display', 'inline-block');
            $("#to").css('display', 'none');

            var pid = $(this).val();
            $.ajax({
                type: "get",
                url: "/index.php/site/ajax",
                data: {
                    pid: pid,
                },
                success: function(json) {
                    // alert(json);
                    var data = eval('(' + json + ')');//json转化为对象
                    var str = "";
                    for (var i = 0; i < data.length; i++) {
                        //alert(data[i].name);
                        str += "<option value=" + data[i].code + ">" + data[i].name + "</option>";
                        $("#county").empty();

                        $("#county").append("<option value=" + '-1' + ">" + '请选择' + "</option>");
                        $("#county").append(str);

                    }
                }
            });
        });
    });
    $(document).ready(function() {
        $('#county').bind('change', function() {
            $("#to").css('display', 'inline-block');
            var pid = $(this).val();
            $.ajax({
                type: "get",
                url: "/index.php/site/ajax",
                data: {
                    pid: pid,
                },
                success: function(json) {
                   // alert(json);
                    var data = eval('(' + json + ')');
                    var str = "";
                    for (var i = 0; i < data.length; i++) {
                        //alert(data[i].name);
                        str += "<option value=" + data[i].code + ">" + data[i].name + "</option>";
                        $("#town").empty();

                        $("#town").append("<option value=" + '-1' + ">" + '请选择' + "</option>");
                        $("#town").append(str);

                    }
                }
            });
        });
    });
</script>

jq 地区（省市县区）联动菜单

标签：

原文地址：http://blog.csdn.net/mengke1124/article/details/46456539