jQuery二级联动

最新推荐文章于 2026-01-08 23:29:03 发布

转载最新推荐文章于 2026-01-08 23:29:03 发布 · 85 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shenq/p/4924696.html

文章标签：

#javascript #ViewUI

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>
    <script src="js/jquery-1.7.1.js"></script>
    <style>

    </style>
    <script type="text/javascript">

        $(function(){
            var provinces = ['北京', '上海', '浙江'];
            var provinceCityMap = {
                '北京': ['东城','西城','崇文','宣武','朝阳'],
                '上海': ['黄浦','卢湾','徐汇','长宁','静安'],
                '浙江': ['杭州','嘉兴','宁波','温州','湖州']
            };
            var $province = $('#province');
            for(var i = 0; i < provinces.length; i++){
                $('<option>' + provinces[i] + '</option>')
                        .appendTo($province)
                        .val(provinces[i]);
            }
            $province.on('change', function() {
                //当前选中的省的值
                var citySelected = $province.find('option:selected').val();
                //console.log(citySelected);
                changeCitys(citySelected);
            });
            function changeCitys(province) {
                $('.city').empty();
                var citys = provinceCityMap[province];
                for(var i = 0;i < citys.length;i++){
                    $('<option>' + citys[i] + '</option>')
                            .appendTo('.city')
                            .val(citys[i]);
                }
            }
            changeCitys($province.find('option:selected').val());
            $('.show').on('click', function() {
                console.log($province.find('option:selected').val());
            });

        });
    </script>


</head>
<body>

<select id="province"></select>

<select class="city"></select>

<button class="show">显示</button>
</body>
</html>

转载于:https://www.cnblogs.com/shenq/p/4924696.html