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

三级联动

时间:2018-04-22 20:09:56      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:val   class   对象   三级联动   ack   烟台   charset   河南   html   

<!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>

 

三级联动

标签:val   class   对象   三级联动   ack   烟台   charset   河南   html   

原文地址:https://www.cnblogs.com/lyxdw/p/8908793.html

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