使用 JQuery 实现级联选择框

最新推荐文章于 2024-07-22 21:44:46 发布
最新推荐文章于 2024-07-22 21:44:46 发布
阅读量779 收藏 5
点赞数
文章标签： jquery js html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MonsterAji/article/details/115577574
版权

一、运行截图

在这里插入图片描述

在这里插入图片描述

二、使用步骤

1.

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="jquery/jquery-3.5.1.js"
    type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

       function show(num){
           $("select:last").html("<option >--请选择--</option>");
           var arr=new Array();
           arr[0] =["石家庄","邯郸","唐山","张家口","廊坊"];
           arr[1] =["石家庄","邯郸","唐山","张家口","廊坊"];
           arr[2] =["石家庄","邯郸","唐山","张家口","廊坊"];
             var nums=arr[num];
             
              $.each(nums,function(){
                  var temp="<option>"+this+"</option>";
                  $("select:last").append(temp);
              })
       }
       $(document).ready(function(){
           $("select option").hover(function(){
               $("option").css("bgcolor","blue");
           });
       });
    </script>
<body>
     <select onchange="show(this.value)" align="center" margin=0>
        <option >--请选择--</option>
        <option value="0">河北省</option>
        <option value="1">辽宁省</option>
        <option value="1">山东省</option>
</select>
<select >
    <option >--请选择--</option>
</select>    
</body>
</html>
MonsterAji
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery cascader 级联选择器_Element UI Cascader级联选择器选择任意一级选项组件去掉前面圆圈...
weixin_39887926的博客
11-23 1527
最近一个需求在使用到Element UI Cascader级联选择器中的选择任意一级选项这个组件的时候，这个组件在最新2.13版本的时候前面多了一个圆圈，只有点击圆圈的时候才代表选中，点击文字不会被选中，而我的需求是需要点中文字则选中，经过爬坑总结出一个方法，简单的说就是改变前面圆圈的样式来进行实现的，现记录一下，上代码.el-cascader-panel .el-radio { ...
jQuery实现下拉框联动
李维斯的博客
05-22 1290
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> ...
jQuery实现select级联
weixin_34395205的博客
09-11 130
使用Html5的数据属性(data-*)Map级联关系，代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Select级联</title> 5 <script src="https://code.jquery.com/jquery-1.1...
jQuery-层级选择器
heliuerya的博客
05-17 709
input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />" class="none">style的display为"none"的div/*隐藏该div*/
jQuery多级联动选择器
06-01
一款多级联动选择器，可自定义层级
jquery实现 级联选择器
weixin_42698255的博客
04-10 4475
看到UI在做设计图 有级联选择器 就先写写 （项目还在用jquery~~~~~~） 先上效果图 css .box{ position: relative; width: 800px; height: 800px; background: #2A363E; } .input{ font-size: 20px; ...
select级联选择器参考 原生JS实现和jQuery实现
qq_40178497的博客
03-27 1992
原生JS实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t.
JQuery实现表格复选框
zhang245754954的博客
01-31 2441
利用jquery实现全选全部选反选等等效果 <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> </head> <script type="application/javascript"> $().ready(function(){ $("#checkItems").
jQuery实现级联地区选择
11-23
6. CSS样式应用：最后，使用CSS确保级联选择器的视觉效果一致且易于使用。 总的来说，这个实例展示了如何结合使用jQuery、JSP、JavaScript和CSS来实现一个功能完善的级联地区选择器，这在网页开发中非常实用，尤其...
基于vue2.0实现的级联选择器
01-19
本文探讨一下在vue中的实现级联选择器，自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数据逻辑 这种情况是比较推荐的，大量的数据运算放在后...
基于jQuery的三层级联选择器
06-01
基于jQuery的三层级联选择器，左右两栏布局，点击空白位置可关闭
基于JQuery实现的Select级联
10-26
Select级联，想必大并不陌生吧，本文为大家介绍下使用jquery是如何快速实现的，希望对大家有所帮助
jQuery实现级联下拉框实战（5）
10-20
在本文中，我们将探讨如何使用jQuery实现级联下拉框的效果，这是一个常见的前端交互功能，常用于数据筛选和表单填写。级联下拉框允许用户在一个下拉框中做出选择后，根据所选内容动态更新下一个下拉框的选项。这种...
jQuery输入框三级联动菜单选择
ICode联盟
10-26 504
jQuery输入框三级联动菜单选择效果，点击input输入框分类菜单选择器，点击弹出下拉菜单，三级联动选择器，适用于多分类菜单选择代码。
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
Jin_Xiang123的博客
01-14 3608
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
jquery实现联动效果 （通用）省市的三级联动 四级联动 同样的做法
@Yan*_*zeng博客
11-16 414
三级联动效果
jQuery层级选择器（常用）
越努力越幸运的博客
06-27 412
jQuery层级选择器（常用） 层级有四种： 某元素A的所有后代元素B用空格表示（例：form input表示form中的所有input标签） 某元素A的子元素B用>表示（例：form>input仅表示form中的input子元素） 某元素A下边的元素B用+表示（例：label>input表示前面是label的input元素） 某元素A后边的兄弟元素B用~表示（例：form~input表示与form互为兄弟元素的input元素） <!DOCTYPE html> <ht
jquery 联合选择器，相对选择和层级选择器__多类交集选择器,多属性选择器
houzhyan-博客
10-26 8839
1、多条件选择器 用途：使用多个条件同时选择多个标签 用法：$(“条件1，条件2，条件3，……，条件n “); 特征：多个条件在“”内用逗号隔开； 用例：$(“div#id,span.tip,p”); //同时选择id为“id”的div标签,class为“tip”的span标签和p标签； 2、相对选择器 用途：使用第二个参数选出相对元素，从而不影响其他具有相同条
Web前端：HTML篇（一）
最新发布
sjb2274540432的博客
07-22 1055
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html+js 实现树形级联选择框代码
04-26
好的，这是一个基于 HTML、JavaScript 和 jQuery 的树形级联选择框代码： HTML 代码： ``` <div id="tree"> <select id="level1"> <option value="">请选择一级分类</option> <option value="1">分类1</option> <option value="2">分类2</option> <option value="3">分类3</option> </select> <select id="level2"> <option value="">请选择二级分类</option> </select> <select id="level3"> <option value="">请选择三级分类</option> </select> </div> ``` JS 代码： ``` $(function() { var treeData = [ { "id": "1", "text": "分类1", "children": [ { "id": "1-1", "text": "分类1-1", "children": [ { "id": "1-1-1", "text": "分类1-1-1" }, { "id": "1-1-2", "text": "分类1-1-2" } ] }, { "id": "1-2", "text": "分类1-2", "children": [ { "id": "1-2-1", "text": "分类1-2-1" }, { "id": "1-2-2", "text": "分类1-2-2" } ] } ] }, { "id": "2", "text": "分类2", "children": [ { "id": "2-1", "text": "分类2-1", "children": [ { "id": "2-1-1", "text": "分类2-1-1" }, { "id": "2-1-2", "text": "分类2-1-2" } ] }, { "id": "2-2", "text": "分类2-2", "children": [ { "id": "2-2-1", "text": "分类2-2-1" }, { "id": "2-2-2", "text": "分类2-2-2" } ] } ] }, { "id": "3", "text": "分类3", "children": [ { "id": "3-1", "text": "分类3-1", "children": [ { "id": "3-1-1", "text": "分类3-1-1" }, { "id": "3-1-2", "text": "分类3-1-2" } ] }, { "id": "3-2", "text": "分类3-2", "children": [ { "id": "3-2-1", "text": "分类3-2-1" }, { "id": "3-2-2", "text": "分类3-2-2" } ] } ] } ]; var $level1 = $('#level1'), $level2 = $('#level2'), $level3 = $('#level3'); // 初始化一级分类 for (var i = 0; i < treeData.length; i++) { $level1.append('<option value="' + treeData[i].id + '">' + treeData[i].text + '</option>'); } // 当一级分类选中时，动态创建二级分类 $level1.on('change', function() { var val = $(this).val(); $level2.empty().append('<option value="">请选择二级分类</option>'); for (var i = 0; i < treeData.length; i++) { if (treeData[i].id === val) { var children = treeData[i].children; if (children && children.length > 0) { for (var j = 0; j < children.length; j++) { $level2.append('<option value="' + children[j].id + '">' + children[j].text + '</option>'); } } } } $level2.trigger('change'); }); // 当二级分类选中时，动态创建三级分类 $level2.on('change', function() { var val = $(this).val(); $level3.empty().append('<option value="">请选择三级分类</option>'); for (var i = 0; i < treeData.length; i++) { var children = treeData[i].children; if (children && children.length > 0) { for (var j = 0; j < children.length; j++) { if (children[j].id === val) { var grandchildren = children[j].children; if (grandchildren && grandchildren.length > 0) { for (var k = 0; k < grandchildren.length; k++) { $level3.append('<option value="' + grandchildren[k].id + '">' + grandchildren[k].text + '</option>'); } } } } } } }); }); ``` 这段代码实现了一个三级树形级联选择框，当一级分类选中时，动态加载二级分类；当二级分类选中时，动态加载三级分类。根据你的实际需求，你可以修改 treeData 数组中的分类数据。希望这个代码对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值