省市联动 --- jQuery

省市联动

　　步骤分析：

　　　　1.确定事件省份的下拉选变化的时候 change

　　　　2.编写函数

　　　　　　a.获取当前省份的value值

　　　　　　b.通过数组获取该省下的所有市，返回值：数组

　　　　　　c.遍历数组，拼装成option元素，追加到市下拉选即可

　　　　　　注意：每次改变的时候初始化的值

　　技术:

　　　　遍历数组

　　　　　　数组.each(function(){})；

　　　　　　$.each(遍历数组,function(){})；

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>05-可见性过滤选择器.html</title>

 <script src="../js/jquery-1.11.0.min.js"></script>
 <script type="text/javascript">
     $(function(){
　　　　　　//方式1
         $("#b1").click(function(){
             //1.获取文本隐藏域
             $("input,hidden").each(function(){
                 alert($(this).val());
             })
         });
　　　　　　//方式2
         $("b2").click(function(){
             $.each(("input,hidden"), function() {
                 alert($(this).val());
             });
         })
     });
 </script>
</head>
<body>
  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b1"/>
  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b2"/>
  <br /><br />
  <!--文本隐藏域-->
 <input type="hidden" value="hidden_1">
 <input type="hidden" value="hidden_2">
 <input type="hidden" value="hidden_3">
 <input type="hidden" value="hidden_4">
</body>
</html>

遍历数组

　　　　设置或者获取value属性

　　　　　　jquery对象.val()：获取

　　　　　　jquery对象.val("..."):设置

　　　　设置或者获取标签体的内容

　　　　　　html()

　　　　　　text()

　　　　　　xxxx():获取标签体的内容

　　　　　　xxxx("..."):设置标签体的内容

　　　　设置的区别：

　　　　　　html：会把字符串解析

　　　　　　text：只作为普通的字符串

　　　　获取的区别：

　　　　　　html:获取的html源码

　　　　　　text:获取的只是页面展示的内容

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        var $username = $("[name = 'username']")
        $username.prop("value","yisen");
        //3.1 获取 username的value属性的值
            alert($username.val());
        //3.2 设置 username的默认值为"许多多"
            $username.val("许多多");
        //3.3通过html获取div标签体的内容
            var $div = $("div");
            alert($div.html());
        //3.4通过html设置div标签体的内容
            alert($div.html("yisen"));
        
        //3.5通过text获取div标签体的内容
            alert($div.text());
        //3.6通过text设置div标签体的内容
            $div.text("666");
            alert($div.text());
        //3.7 两者设置值的区别
             $div.html("<a href='#'>超链接</a>");//就是一个超链接
            $div.text("<a href='#'>超链接</a>");//括号里内容作为普通的字符串
        //3.8 两者获取值的区别
            alert($("#sp").html());//获取源码
            alert($("#sp").text());//获取只是显示的内容
        
        });    
    </script>
    <style type="text/css">
        .textClass {
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <h3>表单</h3>
    <form action="">
        <table border="1">
            <tr id="tr1">
                <td><label>姓名</label></td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td><span>密码</span></td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" value="男" />男
                    <input type="radio" name="gender" value="女" />女
                </td>
            </tr>
            
            <tr>
                <td></td>
                <td>
                    <button type="button">普通按钮</button>
                    <input type="submit" value="提交按钮" />
                    <input type="reset" value="重置按钮" />
                </td>
            </tr>
        </table>
    </form>
    
    
    <h3>公告信息</h3>
    <div>
        未满18慎进
    </div>
    <span id="sp">外span<a href='#'>内超链</a></span>
</body>
</html>

jquery方法

　　jQuery版：

　　　　创建一个元素： $("<标签></标签>") 例： $("<option></option>")

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            // 定义二维数组:
            var arr = new Array(4);
            arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
            arr[1] = new Array("长春市","吉林市","四平市","通化市");
            arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
            arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
        </script>
    </head>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
         $(function(){
             $("[name= 'pro']").change(function(){
                 //获取市下拉选
                 var $city = $("[name = 'city'");
                 //初始化
                 $city.html($("<option>").html("-请选择-"));                 
                 //获取所有的市
                 var pro = $(this).val();
                 //获取所有的市数组
                 var cities = $(arr[pro]);
                 //alert(cities);
                 //遍历数组，拼装成option，追加到市下拉选
                 cities.each(function(){
                     $city.append("<option>"+this+"</option>");
                 })
                 
             })
         });
    </script>
    <body>
        <form action="#" method="get">
            <input type="hidden" name="id" value="007"/>
            姓名:<input name="username" value="xuduoduo"/><br>
            密码:<input type="password" name="password"  value="123" disabled="disabled"><br>
            性别:<input type="radio" name="sex" value="1" checked="checked">男
                <input type="radio" name="sex" value="0">女
                <br>
            爱好:<input type="checkbox" name="hobby" value="eat">吃
                <input type="checkbox" name="hobby" value="drink" checked="checked">喝
                <input type="checkbox" name="hobby" value="sleep" checked="checked">睡
                <br>
            头像:<input type="file" name="photo"><br>
            籍贯:
                <select name="pro">
                    <option >-请选择-</option>
                    <option value="0">黑龙江</option>
                    <option value="1">吉林</option>
                    <option value="2">辽宁</option>
                    <option value="3">河南</option>
                </select>
                <select name="city">
                    <option >-请选择-</option>     
                </select>
            <br>
            自我介绍:
                <textarea name="intr" cols="40" rows="4">good!</textarea>
            <br>
            <input type="submit" value="保存"/>
            <input type="reset" />
            <input type="button" value="普通按钮"/>
        </form>
    </body>
</html>

省市联动

posted @ 2020-07-20 21:22 Yisennnn丶阅读(101) 评论(0) 收藏举报

刷新页面返回顶部