如何使用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中的deferred使用方法
Mar 27 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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
杏林同学录(七)
2006/10/09 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
php微信公众号开发之简答题
2018/10/20 PHP
prototype1.4中文手册
2006/09/22 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
Python异常的检测和处理方法
2018/10/26 Python
python3获取url文件大小示例代码
2019/09/18 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Python如何给你的程序做性能测试
2020/07/29 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
销售督导岗位职责
2015/04/10 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle