jQuery省市联动

<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        var datas = {
            '广东': ['深圳', '广州'],
            '河南': ['郑州', '洛阳'],
            '湖北': ['武汉', '宜昌']
        }
        $(function () {

            var province = $('<select></select>').appendTo('body');
            province.change(function () {
                loadCity();
            });

            $.each(datas, function (key, value) {
                $('<option value="' + key + '">' + key + '</option>').appendTo(province);
            });

            var city = $('<select></select>').appendTo('body');
            loadCity();
            


            function loadCity() {
                city.empty();
                var citys = datas[province.val()];               
                $.each(citys, function (index, value) {
                    $('<option>' + value + '</option>').appendTo(city);
                });
            }



        });
    </script>
</head>
<body>


</body>
</html>
posted @ 2018-05-11 12:26  dxm809  阅读(104)  评论(0编辑  收藏  举报