如何使用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实现图片平滑滚动详解
Mar 22 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery插件实现悬浮的菜单
Apr 24 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制作简单的内容采集器的原理分析
2008/10/01 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
layui使用label标签的方法
2019/09/14 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python用input输入列表的实例代码
2020/02/07 Python
成人大专自我鉴定范文
2013/10/19 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
内业资料员岗位职责
2014/01/04 职场文书
招聘单位介绍信
2014/01/14 职场文书
领导视察欢迎词
2014/01/15 职场文书
自主招生推荐信范文
2014/05/10 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python