三级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
    <script src="../day10/jquery-1.8.3.js"></script>
</head>
<body>
    <!-- 省 -->
    <select name="" id="sheng">
        <option value="">--请选择省--</option>
    </select>
    <!-- 市 -->
    <select name="" id="shi">
        <option value="">--请选择市--</option>
    </select>
    <!-- 县/区 -->
    <select name="" id="xian">
        <option value="">--请选择区县--</option>
    </select>
    <script>
        // 定义数据 省和市关系
        var S={};
        S['河北省']=['石家庄','承德'];
        S['山东']=['青岛','烟台'];
        S['河南']=['郑州','安阳'];
        // 定义市和县的关系
        var s={};
        s['石家庄']=['正定','藁城','桥西'];
        s['承德']=['兴隆','隆华'];
        s['青岛']=['市南','市北','崂山'];
        s['烟台']=['芝罘','福山'];
        s['郑州']=['金水','上街'];
        s['安阳']=['文峰','林州'];

        var str='<option value="">--请选择省--</option>';
        //遍历省的随想拿到对象里面的键  写入select
        for(i in S){
            // console.log(i);
            str+='<option value="' + i + '">'+i+'</option>';
        }
        // console.log(str);
        $('#sheng').html(str);

        // 给省绑定change()事件
        $('#sheng').change(function(){
            var str1='<option value="">--请选择市--</option>';
            // console.log($(this).val());
            // 获取当前选中选项的value值 value对应市
            var Val=$(this).val();
            //通过索引回去对应的值(市)
            // console.log(S[Val]);
            for(i in S[Val]){
                var Index=S[Val][i];
                // console.log(Index);
                str1+='<option value="'+Index+'">'+Index+'</option>';
            }
            // 将拼接好的数据写入市里
            $('#shi').html(str1);
        })

        $('#shi').change(function(){
            var str2='<option value="">--请选择区县--</option>';
            // console.log($(this).val());
            // 获取当前选中选项的value值 value对应县
            
            var Val=$(this).val();
            //通过索引回去对应的值(县)
            // console.log(S[Val]);
            for(i in s[Val]){
                var Index=s[Val][i];
                // console.log(Index);
                str2+='<option value="'+Index+'">'+Index+'</option>';
            }
            // 将拼接好的数据写入县里
            $('#xian').html(str2);
        })
    </script>
</body>
</html>
猜你喜欢
