码迷,mamicode.com
首页 > 其他好文 > 详细

省市区三级联动

时间:2020-07-08 14:58:12      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:cti   lis   empty   选择   UNC   sel   cte   data   each   

<div class="ipt-wrap clearfix">
    <label>籍贯:</label>
    <div class="ipt-r">
        <select class="sele-a" name="province">
            <option value="0">请选择</option>
            <volist name="province" id="p">
                <option value="{pigcms{$p.area_id}">{pigcms{$p.area_name}</option>
            </volist>
        </select>
        <select class="sele-b" name="city">
            <option value="0">请选择</option>

        </select>
        <select class="sele-c" name="area">
            <option value="0">请选择</option>
        </select>
    </div>
</div>

$("select[name=‘province‘]").change(function () {
    var pro = $(this).find("option:selected").val();
    $.get("{pigcms{:U(‘getCity‘)}", {province: pro}, function (result) {
        $("select[name=‘city‘]").empty();
        $("select[name=‘area‘]").empty();
        $("select[name=‘city‘]").append(new Option(‘请选择‘, 0));
        $("select[name=‘area‘]").append(new Option(‘请选择‘, 0));
        if (result.status == 200) {
            result.data.forEach(function (a) {
                $("select[name=‘city‘]").append(new Option(a[‘area_name‘], a[‘area_id‘]));
            });
        }
    }, ‘json‘);
});
$("select[name=‘city‘]").change(function () {
    var cit = $(this).find("option:selected").val();
    $.get("{pigcms{:U(‘getArea‘)}", {city: cit}, function (result) {
        if (result.status == 200) {
            $("select[name=‘area‘]").empty();
            result.data.forEach(function (a) {
                $("select[name=‘area‘]").append(new Option(a[‘area_name‘], a[‘area_id‘]));
            });
        } else {
            $("select[name=‘area‘]").empty();
            $("select[name=‘area‘]").append(new Option(‘请选择‘, 0));
        }
    }, ‘json‘);
});

注意:
forEach()是数组特有的一个方法,只能是数组,对象不行。

省市区三级联动

标签:cti   lis   empty   选择   UNC   sel   cte   data   each   

原文地址:https://www.cnblogs.com/wangyuyanhello/p/13266717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!