使用 JQuery 实现级联选择框

最新推荐文章于 2023-05-17 16:20:48 发布
最新推荐文章于 2023-05-17 16:20:48 发布
阅读量752 收藏 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多级联动选择器
06-01
一款多级联动选择器，可自定义层级
jQuery输入框三级联动菜单选择
ICode联盟
10-26 477
jQuery输入框三级联动菜单选择效果，点击input输入框分类菜单选择器，点击弹出下拉菜单，三级联动选择器，适用于多分类菜单选择代码。
select级联选择器参考 原生JS实现和jQuery实现
qq_40178497的博客
03-27 1854
原生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的级联选择器
weixin_30845171的博客
08-16 1129
GIT源码 https://github.com/MeiJunZhang/CascadeSelect 版本 1.1.1 1.支持地区级联选择，部门级联选择，菜单分类级联选择等无限极分类操作 2.自动创建多个下拉选择框 使用说明 $("#divArea").CascadeSelect({ ajaxUrl: "/tools/CascadeSelect.ashx", isAutoAs...
jQuery之选择器
缚己
11-03 238
基本选择器 基本选择器和CSS中的基本选择器用法一致，如下代码所示： <body> <button id="btn"></button> <button class="cls box"></button> <button class="cls" id="btn2"></button> <script> // 标签选择器 console.log($('button')) // id选择器
jQuery-层级选择器
最新发布
heliuerya的博客
05-17 695
input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />" class="none">style的display为"none"的div/*隐藏该div*/
jquery实现 级联选择器
weixin_42698255的博客
04-10 4440
看到UI在做设计图 有级联选择器 就先写写 （项目还在用jquery~~~~~~） 先上效果图 css .box{ position: relative; width: 800px; height: 800px; background: #2A363E; } .input{ font-size: 20px; ...
jquery cascader 级联选择器_Element UI Cascader级联选择器选择任意一级选项组件去掉前面圆圈...
weixin_39887926的博客
11-23 1505
最近一个需求在使用到Element UI Cascader级联选择器中的选择任意一级选项这个组件的时候，这个组件在最新2.13版本的时候前面多了一个圆圈，只有点击圆圈的时候才代表选中，点击文字不会被选中，而我的需求是需要点中文字则选中，经过爬坑总结出一个方法，简单的说就是改变前面圆圈的样式来进行实现的，现记录一下，上代码.el-cascader-panel .el-radio { ...
基于jQuery的三层级联选择器
06-01
基于jQuery的三层级联选择器，左右两栏布局，点击空白位置可关闭
jQuery层级选择器（常用）
越努力越幸运的博客
06-27 397
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实现的Select级联
10-26
Select级联，想必大并不陌生吧，本文为大家介绍下使用jquery是如何快速实现的，希望对大家有所帮助
jQuery实现级联地区选择
11-23
jQuery+div实现级联省份-城市查询，该实例包含jsp+js+css,所有代码为本人亲自编写，如有疑问请联系本人
基于vue2.0实现的级联选择器
01-19
本文探讨一下在vue中的实现级联选择器，自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数据逻辑 这种情况是比较推荐的，大量的数据运算放在后...
jQuery实现可收缩展开的级联菜单实例代码
01-19
使用jQuery来实现级联菜单的一般步骤如下： •1.首先使用和创建一个级联菜单 代码如下:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><...
jQuery实现的多选框多级联动插件
12-11
jQuery 实现的多选框联动插件 代码如下: // 使用：$(_event_src_).autoSelect(_reload_, reload_url); // 前台用get方法传输<select>标签的属性”name”和选中的属性”value” // 后台用json格式传输数据 // ...
基于jQuery下拉选择框插件支持单选多选功能代码
10-22
主要介绍了基于jQuery下拉选择框插件支持单选多选功能代码的相关资料,需要的朋友可以参考下
jQuery实现3级级联
06-04
function objInit(obj){//下拉列表框初始化 return $(obj).html("请选择); }; var arrData={ 厂商1:{品牌1_1:"型号1_1_1,型号1_1_2",品牌1_2:"型号1_2_1,型号1_2_2"}, 厂商2:{品牌2_1:"型号2_1_1,型号2_1_2",...
【HTML】使用 JQuery 实现级联选择框
あの花
04-14 2785
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>201731061203+许嘉欣</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js">&...
Jquery的总结一（Jquery的多种选择器）
qq_56248592的博客
12-19 1462
jquery的三大重点（选择器,事件，效果）
html+js 实现级联选择框代码
04-26
可以使用html和js实现级联选择框的功能，以下是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>级联选择框</title> </head> <body> <form> <select id="province"> <option value="">请选择省份</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="area"> <option value="">请选择地区</option> </select> </form> <script type="text/javascript"> //省份数据 var provinceData = [ { name: '北京', city: [ { name: '北京市', area: ['东城区', '西城区', '朝阳区', '海淀区', '丰台区'] } ] }, { name: '上海', city: [ { name: '上海市', area: ['黄浦区', '徐汇区', '长宁区', '静安区', '浦东新区'] } ] } ]; //城市数据 var cityData = {}; //地区数据 var areaData = {}; //初始化省份数据 function initProvince() { var provinceSelect = document.getElementById('province'); //添加省份数据 for (var i = 0; i < provinceData.length; i++) { var province = provinceData[i]; var option = document.createElement('option'); option.value = province.name; option.text = province.name; provinceSelect.appendChild(option); } //绑定省份选择事件 provinceSelect.onchange = function() { var citySelect = document.getElementById('city'); var areaSelect = document.getElementById('area'); //如果省份未选中，则清空城市和地区选择框数据 if (provinceSelect.value === '') { citySelect.innerHTML = '<option value="">请选择城市</option>'; areaSelect.innerHTML = '<option value="">请选择地区</option>'; return; } //如果城市和地区已选中，则不需要再次加载数据 if (citySelect.value !== '' && areaSelect.value !== '') { return; } //加载城市数据 var provinceName = provinceSelect.value; if (cityData[provinceName]) { //如果已经加载过城市数据，则直接从内存中读取 var cityList = cityData[provinceName]; } else { //如果没有加载过，则从省份数据中查找对应城市数据 for (var i = 0; i < provinceData.length; i++) { if (provinceData[i].name === provinceName) { cityList = provinceData[i].city; cityData[provinceName] = cityList; break; } } } //添加城市数据 citySelect.innerHTML = '<option value="">请选择城市</option>'; for (var i = 0; i < cityList.length; i++) { var city = cityList[i]; var option = document.createElement('option'); option.value = city.name; option.text = city.name; citySelect.appendChild(option); } //清空地区数据 areaSelect.innerHTML = '<option value="">请选择地区</option>'; }; } //初始化城市数据 function initCity() { var citySelect = document.getElementById('city'); //绑定城市选择事件 citySelect.onchange = function() { var areaSelect = document.getElementById('area'); //如果城市未选中，则清空地区选择框数据 if (citySelect.value === '') { areaSelect.innerHTML = '<option value="">请选择地区</option>'; return; } //如果地区已选中，则不需要再次加载数据 if (areaSelect.value !== '') { return; } //加载地区数据 var provinceName = document.getElementById('province').value; var cityName = citySelect.value; if (areaData[provinceName + cityName]) { //如果已经加载过地区数据，则直接从内存中读取 var areaList = areaData[provinceName + cityName]; } else { //如果没有加载过，则从省份数据和城市数据中查找对应地区数据 for (var i = 0; i < provinceData.length; i++) { if (provinceData[i].name === provinceName) { var cityList = provinceData[i].city; for (var j = 0; j < cityList.length; j++) { if (cityList[j].name === cityName) { areaList = cityList[j].area; areaData[provinceName + cityName] = areaList; break; } } break; } } } //添加地区数据 areaSelect.innerHTML = '<option value="">请选择地区</option>'; for (var i = 0; i < areaList.length; i++) { var area = areaList[i]; var option = document.createElement('option'); option.value = area; option.text = area; areaSelect.appendChild(option); } }; } //初始化级联选择框 function init() { initProvince(); initCity(); } init(); </script> </body> </html> ``` 在该示例代码中，需要先定义省份数据、城市数据和地区数据，然后在页面加载时初始化省份选择框，并绑定省份选择事件；当省份选择框改变时，根据选中的省份加载对应的城市数据，并添加到城市选择框中，同时清空地区选择框数据；当城市选择框改变时，根据选中的省份和城市加载对应的地区数据，并添加到地区选择框中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值