当前位置: 首页 > 编程笔记 >

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

谭毅然
2023-03-14
本文向大家介绍如何使用Jquery动态生成二级选项列表,包括了如何使用Jquery动态生成二级选项列表的使用技巧和注意事项,需要的朋友参考一下

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

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

实现效果:

源代码:

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 问题内容: 嗨,我想遍历一个人对象列表,并在每个人的选项卡中显示数据。我试过了: 这是行不通的。任何帮助表示赞赏 PrimeFaces 3.x的tabView现在支持动态数量的选项卡,并增加了自己的迭代功能: 不幸的是,仍然不可能在同一个tabView中同时包含固定和动态选项卡(正如我想做的那样),甚至无法在不重建视图的情况下动态添加选项卡。幸运的是,当使用SessionScoped或CDI Co

  • 我想用jQuery开发一个动态表单生成器,用户可以在其中构建自己的表单并更改表单名称、输入类型、大小等。我知道有一些很酷的拖放在线表单生成器,但我想开发一个非常简单的表单生成器。 我已经开始发展这一点,我面临着一些问题。 当用户单击标签(输入字段)时,它会使用jquery和edit and delete按钮动态创建一个输入字段。 下面的代码在div中附加输入字段,该字段现在是空的。 点击文本输入,

  • 目前,我正在生成表头和行,但我希望使行更具动态性。如何在不重复一次的情况下打印行的数据?我怎样才能像标题一样使用1语句呢?所以基本上我只需要调用{row},它应该生成该行包含的所有内容,而不必键入{row.school}等等。。。

  • 问题内容: 我有以下问题。我的表格()结构如下: 存储不同表的名称,并在这些表中存储ID。我想做的是检查上述表中的行是否存储了对其他表的有效引用。因此,我需要从外部表中选择一行,其名称基于存储在中的字符串。我的代码不起作用,因为它存在语法错误,但清楚地显示了我想要实现的目标: 问题答案: 如果知道所有可能的表名,则可以使用条件语法来实现它:

  • 问题内容: 我正在尝试在MySQL中生成序列表,以便可以从获得唯一ID 。 问题是我需要动态地多个序列。 首先,我创建了一个表: 然后尝试使用http://dev.mysql.com/doc/refman/5.0/en/information- functions.html#function_last-insert- id中的 示例获取编号 一段时间后,我意识到我还需要安全地为新标签生成行。因此,

  • 我必须在运行时动态生成一个xml文件。请帮助我使用PHP动态生成下面的XML文件。 null