• 学习进度7


    今天所学的是jQuery的内容,jQuery是一个快速、简洁的JavaScript框架。

    就是能让代码编写的更方便一点的块

    我做了一个简单的联动案例,如下,这是导入的js文件

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
            <script>
                $(function(){
                    //2.创建二维数组用于存储省份和城市
                    var cities = new Array(3);
                    cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
                    cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
                    cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
                    cities[3] = new Array("郑州市","安阳市","开封市","安阳市");
                    
                    $("#province").change(function(){
                        //10.清除第二个下拉列表的内容
                        $("#city").empty();
                        
                        //1.获取用户选择的省份
                        var val = this.value;
                        //alert(val);
                        //3.遍历二维数组中的省份
                        $.each(cities,function(i,n){
                            //alert(i+":"+n);
                            //4.判断用户选择的省份和遍历的省份
                            if(val==i){
                                //5.遍历该省份下的所有城市
                                $.each(cities[i], function(j,m) {
                                    //alert(m);
                                    //6.创建城市文本节点
                                    var textNode = document.createTextNode(m);
                                    //7.创建option元素节点
                                    var opEle = document.createElement("option");
                                    //8.将城市文本节点添加到option元素节点中去
                                    $(opEle).append(textNode);
                                    //9.将option元素节点追加到第二个下拉列表中去
                                    $(opEle).appendTo($("#city"));
                                });
                            }
                        });
                        
                    });
                });
            </script>
    
        </head>
        <body>
            <form action="#" method="get" onsubmit="return check()">
                籍贯:<select id="province">
                                        <option>--请选择--</option>
                                        <option value="0">湖北</option>
                                        <option value="1">湖南</option>
                                        <option value="2">河北</option>
                                        <option value="3">河南</option>
                                    </select>
                                    <select id="city">
                                        
                                    </select>
                <br />
                重置按钮:<input type="reset" />
            </form>
            
        </body>
    </html>
    View Code

    运行结果如下图,当选中湖北省份,后面的下拉框会默认的切换到武汉这座城市,一个简单的联动

    © 版权声明
    文章版权归作者所有,未经允许请勿转载。
    THE END
  • 相关阅读:
    Linux系统管理05-----权限及归属管理
    Linux系统安装管理04----账号管理
    Linux系统管理03-----安装与管理程序
    Zabbix 监控主机
    Zabbix 页面优化
    基于 MHA 的MySQL高可用-CentOS7(理论)
    基于 MHA 的MySQL高可用-CentOS7(实例)
    部署Jumpserver环境
    GNS3连接本地服务器报错
    zabbix 安装部署
  • 原文地址:https://www.cnblogs.com/xp-thebest/p/12292790.html
Copyright © 2020-2023  润新知