A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 谷粒姐姐 于 2018-5-8 09:50 编辑

1.1 案例四:使用JQuery完成省市二级联动:1.1.1 需求:
在注册页面上籍贯的信息,需要用到省市联动效果.
1.1.2 分析:1.1.2.1 技术分析:
【JQuery的DOM操作】
图片1.png
* 常用的方法:
    * append();                        ---在某个元素后添加内容.        
    * appendTO();                ---将某个元素添加到另一个元素后.
    * remove();                        ---将某个元素移除.
【JQuery的遍历】
遍历的方式一:
* $.each(objects,function(i,n){
   
});
遍历的方式二:
[AppleScript] 纯文本查看 复制代码
* $(“”).each(function(i,n){
});
                        $(function(){
                                var arrs = new Array("张森","张凤","张芙蓉");
                                // 将这个数组转成JQ的对象使用each方法.
                                /*$(arrs).each(function(i,n){
                                        alert(i+"   "+n);
                                });*/
                               
                                $.each(arrs,function(i,n){
                                        alert(i+"   "+n);
                                });
                        });
1.1.2.2 步骤分析:
【步骤一】:引入注册页面,引入jq的js.
【步骤二】:获得到第一个下拉列表,change事件.
【步骤三】:获得到被选中的下拉列表的值.
【步骤四】:去数组中进行比对.
【步骤五】:将数组中的值遍历获得到.
【步骤六】:创建元素,创建文本,将文本添加到元素中,将元素添加到第二个列表中.
1.1.3 代码实现:
               
[AppleScript] 纯文本查看 复制代码
<script>[/align]                        $(function(){
                                // 定义数组:
                                /*var arrs = new Array(5);
                                arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
                                arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
                                arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
                                arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
                                arrs[4] = new Array("长春市","吉林市","四平市","延边市");*/
                               
                                var cities = [
                                        ["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
                                        ["南京市","苏州市","扬州市","无锡市"],
                                        ["武汉市","襄阳市","荆州市","宜昌市","恩施"],
                                        ["石家庄市","唐山市","保定市","邢台市","廊坊市"],
                                        ["长春市","吉林市","四平市","延边市"]
                                ];
                               
                                var $city = $("#city");
                                // 获得代表省份的下拉列表:
                                $("#province").change(function(){
                                        // alert(this.value);
                                        // alert($(this).val());
                                        $city.get(0).options.length = 1;
                                       
                                        var val = this.value;
                                        // 遍历并且判断:
                                        $.each(cities,function(i,n){
                                                // 判断:
                                                if(i == val){
                                                        $(n).each(function(j,m){
                                                                // alert(j+"   "+m);
                                                                $city.append("<option>"+m+"</option>");
                                                        });
                                                }
                                        });
                                });
                        });
                </script>
{:9_565:}

2 个回复

倒序浏览
回复 使用道具 举报
多谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马