码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-event

时间:2018-11-11 23:25:41      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:pen   构建   png   console   code   分享图片   ons   hang   doc   

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="jquery-1.11.3.js"></script>
    <script>
        var province = ["黑龙江","吉林","辽宁"];
        var cities = [
            ["哈尔滨","齐齐哈尔","牡丹江"],
            ["长春","吉林","四平"],
            ["沈阳","大连","铁岭"]
        ];

        $(function(){
            //1、构建 <option>请选择</option>,并增加到selProvince中
            var $opSel = $("<option>请选择</option>");
            $opSel.attr("value","-1");
            $("#selProvince").append($opSel);
            //2、循环遍历 province 数组,取出每一个元素构建成option并增加到selProvince中
            for(var i=0;i<province.length;i++){
                var $op = $("<option></option>");
                $op.html(province[i]);
                $op.attr("value",i);
                $("#selProvince").append($op);
            }

            //3、为selProvince绑定change事件
            $("#selProvince").change(function(event){
                console.log($(event.target));
                //判断是否存在 #selCity 元素
                if($("#selCity").length > 0){
                    $("#selCity").remove();
                }

                //如果选项不是 请选择(-1) 的话
                if(this.value != -1){
                    //1、创建一个 <select></select>,并设置id
                    var $sel = $("<select></select>");
                    $sel.attr("id","selCity");
                    //2、将$sel加载到网页上
                    //$("body").append($sel);
                    $(this).after($sel);
                    //3、从 cities 数组中获取对应的数据并构建  option 添加到 $sel 上
                    //console.log(cities[this.value]);
                    for(var i=0;i<cities[this.value].length;i++){
                        var $opC=$("<option></option>");
                        $opC.attr("value",i);
                        $opC.html(cities[this.value][i]);
                        $sel.append($opC);
                    }
                }

            });
        });
    </script>
 </head>
 <body>
  <select id="selProvince"></select>
 </body>
</html>

技术分享图片

jQuery-event

标签:pen   构建   png   console   code   分享图片   ons   hang   doc   

原文地址:https://www.cnblogs.com/-hjj/p/9943462.html

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