如何使用Jquery动态生成二级选项列表


Posted in jQuery onFebruary 06, 2020

这篇文章主要介绍了如何使用Jquery动态生成二级选项列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

想写一个多级联动的选项列表,并且我想要动态生成,但是我看了好多博客看得我晕乎乎的,就自己查了一些jq 的方法自己尝试些了一下,下面放上我实现的效果和源代码

实现效果:

如何使用Jquery动态生成二级选项列表

源代码:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>

    <!--引入jquery框架-->
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      //      在函数中添加选项列表联动的事件
      $(function() {
        //        定义两个数组,既然是二级联动的列表,那么第二个列表肯定就是二维的了,也就是下面的city数组
        var pro = ['省份一', '省份二', '省份三'];
        var city = [
          ['1', '2', '3'],
          ['4', '5'],
          ['6']
        ];

        //使用一个for循环设置好省份的选项列表,这一步比较简单,逻辑也比较清晰
        //        append():添加选项
        //        val():返回当前选项值
        //        html():给返回的当前选项添加内容
        for(var i = 0; i < pro.length; i++) {
          $("#pp").append($("<option></option>").val(i + 1).html(pro[i]));
        }

        //        这里是监听第一个选项列表的改变事件, 也就是当我们选中省份中的某一项时, 第二个列表会显示出相对应的城市名字
        $('#pp').change(function() {
          //定义一个变量,存放选中的项是第几项,然后减去一个1作为二维数组的下标
          var index = $(this).val() - 1;
//          设置属性值
          $("#cc").prop("length", 1);

          for(var i = 0; i < city[index].length; i++) {
            $("#cc").append($("<option></option>").val(i + 1).html(city[index][i]));

          }

        })

      })
    </script>

  </head>

  <body>

    <!--先在body中定义好连个下拉列表-->
    <select id="pp">
      <option selected="selected">请选择</option>

    </select>

    <select id="cc">
      <option selected="selected">请选择</option>

    </select>

  </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
9种方法优化jQuery代码详解
Feb 04 #jQuery
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
You might like
深入PHP异步执行的详解
2013/06/03 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
xml和web特殊字符
2009/04/28 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jquery购物车结算功能实现方法
2020/10/29 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
实习生自我鉴定
2013/12/12 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
协议书与合同的区别
2014/04/18 职场文书
英语分层教学实施方案
2014/06/15 职场文书
简历自我评价优缺点
2015/03/11 职场文书
消防验收申请报告
2015/05/15 职场文书
2015年档案室工作总结
2015/05/23 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
爱国主义主题班会
2015/08/14 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
MySQL8.0.18配置多主一从
2021/06/21 MySQL