select实现三级联动

已于 2024-01-26 00:01:00 修改
阅读量6.6k 收藏 2
点赞数 1
分类专栏： web 文章标签： js  web前端
于 2018-03-17 11:50:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengchengwu2012/article/details/79590622
版权

 一、select标签入门


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/jquery.min.js" type="text/jscript"></script>
        <link href="css/bootstrap-grid.min.css" rel="stylesheet" />
        <link href="css/bootstrap-reboot.min.css" rel="stylesheet" />
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <title></title>

        <script>
            
            var  arr=["C/C++","JAVA","PHP","Javascript",".Net"];
            
            $(function() {
                var  $selectParent=$("#querycourse");
                for(var i=0;i<arr.length;i++) {
                       var $option=$("<option>"+arr[i]+"</option>");   
                       $option.val(arr[i]);
                       $selectParent.append($option);
                }
             
            });
 
     
            
            function getListByOption() {
                var $select = $("#queryItem");
                $select.empty();   //置空避免重复加载
                var  $selectChild = $("#queryChildItem");
                $selectChild.empty();
                for(var i = 0; i < 10; i++) {
                        var  name=$("#querycourse").val()+"的第"+i+"课";
                        var $option=$("<option>"+name+"</option>");   
                        $option.appendTo($select);
                      
                }
                getListByChildOption();
             }
        
        
            function getListByChildOption() {
                   var  $selectChild = $("#queryChildItem");
                        $selectChild.empty();
                       
                    for(var j=0;j<10;j++){
                            var  nameChild=$("#queryItem").val()+"第"+j+"节";
                            var $optionChild=$("<option>"+ nameChild+"</option>");   
                            $selectChild.append($optionChild);    
                        }     
            }
            
        
        </script>

    </head>

    <body>
        
        <div style="margin: 20px;">
            
        <select id="querycourse" class="selectpicker" data-live-search="true" value="" onchange="getListByOption()">
            <option data-tokens="ketchup mustard" value="">请选择课程名称</option>
        </select>

        <select id="queryItem" class="selectpicker" data-live-search="true" value=""  onchange="getListByChildOption()">
        <option data-tokens="ketchup mustard" value="">请选择课程课时</option>
        </select>
        <select id="queryChildItem" class="selectpicker" data-live-search="true" value="">
            <option data-tokens="ketchup mustard" value="">请选择课程节次</option>
        </select>
            
        </div>
    </body>

</html>

二、省市区三级联动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<script src="js/jquery.min.js" type="text/jscript"></script>
		<link href="css/bootstrap-grid.min.css" rel="stylesheet" />
		<link href="css/bootstrap-reboot.min.css" rel="stylesheet" />
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<title></title>

		<script>
			var provinceArr = new Array();
			var cityArr;
			var $selectProvince;
			var $selectCounty;
			var $selectCity;

			$(function() {

				$selectProvince = $("#queryProvince");
				$selectCounty = $("#queryCounty");
				$selectCity = $("#queryCity");
				getJson();

			});

			function getJson() {
                                 //加载本地的json文件
				$.getJSON("js/address.json", function(data) {

					$.each(data, function(index, info) {

						provinceArr[index] = info;

						var $option = $("<option>" + info.area_name + "</option>");

						$option.val(index);

						$option.appendTo($selectProvince);

					});

				});

			}

			function showCities() {
				cityArr = new Array();
				var cityJson = provinceArr[$selectProvince.val()].city //获取当前省的所有市区的数据
			    $selectCity.empty();
				$selectCounty.empty();
				$.each(cityJson, function(i, data) {
					cityArr[i] = data;
					var $option = $("<option>" + data.area_name + "</option>");
					$option.val(i);
					$selectCity.append($option);
				});
				showCounty();
			}

			function showCounty() {
                $selectCounty.empty();
				var countyJson = cityArr[$("#queryCity").val()].district //获取当前市的所有区的数据
            	$.each(countyJson, function(i, data) {
                    var $option = $("<option>" + data.area_name + "</option>");
					$option.val(i);
					$selectCounty.append($option);

				});

			}
		</script>
	</head>

	<body>

		<div style="margin: 20px;">

			<select id="queryProvince" class="selectpicker" data-live-search="true" value="" onchange="showCities()">
				<option data-tokens="ketchup mustard" value="-1">请选择省</option>
			</select>

			<select id="queryCity" class="selectpicker" data-live-search="true" value="" onchange="showCounty()">
				<option data-tokens="ketchup mustard" value="">请选择市</option>
			</select>

			<select id="queryCounty" class="selectpicker" data-live-search="true" value="">
				<option data-tokens="ketchup mustard" value="">请选择县区</option>
			</select>

		</div>
	</body>

</html>

  

  

                       

fengchengwu2012
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生JS用select标签实现三级联动
杜伊沫的博客
04-05 688
三级联动思想与二级联动的一样，添加省与市的过程我就不写了，参考原生JS用select标签实现二级联动，就说一下如何添加区 对于区的数组设置，我们需要一个二维数组，拿数组中下标为0的值 来说，从整体上来说，下标为0 的数是一个数组。里面存放的是一个市所包括的所有区的值，不同市所包括的区的值分别放在不同的下标中， 实现思路 1、第一个下标代表的是选择的哪个省 2、第二个下标代表的是选择的哪个市 因此我...
Vue 中实现三级联动下拉框
weixin_42902669的博客
03-27 5900
<!DOCTYPE html> <html lang='en'> <head> <title>下拉框三级联动</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bootstrap --> &lt...
html之select三级联动
一念花开丶君临天下
10-16 8634
三级联动 三级联动的核心是onchange监听文本变化 首先我们需要三个下拉框和一个提交按钮 &amp;amp;amp;lt;!DOCTYPE HTML&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta http-equiv=&amp;amp;quot;Con
jq 实现select 下拉框的联动效果
最新发布
持 开源思想，撰 必胜所学，望 勤学者，无难处
05-16 137
【代码】jq 实现select 下拉框的联动效果。
select 的onchange方法
qq_39822451的博客
04-08 6935
<div class="col-sm-8"> <#form:select id="" path="xxType" dictType="xx_type" blankOption="true" onchange="addXXX();" class="form-control required" /> </div> function addXXX() { ...
【JS】 select 下拉框 绑定onchange事件
weixin_43242020的博客
04-12 4995
原因：网上查询说 onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。解决： 将onchnage事件改为onclick点击事件；2、js原生change事件。
3 种 不同形式的三级联动
Carolina
09-25 941
本文链接 3 种 不同形式的三级联动 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>城市三级联动</title> <style type="text/css"> *{ padding:0; margin:0} html,body{ height: 100%; width: 100%; position:
ajax实现select三级联动效果
10-18
主要为大家详细介绍了ajax动态实现select三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
select2三级联动省市区
09-21
在本案例中，我们将探讨如何利用`Select2`实现省市区三级联动。 首先，我们需要理解“三级联动”的概念。在省市区选择中，三级联动意味着当用户选择一个省份时，相关的城市会自动加载并显示，接着当用户选择一个...
三级联动插件
03-02
在IT领域，"三级联动插件...总之，"三级联动插件"是一种实用的前端交互功能，通过JavaScript技术实现select元素之间的联动效果，提高用户的操作效率。理解和运用这个插件，对于提升网站或应用的用户体验具有重要意义。
layui 地区三级联动 form select 渲染的实例
10-16
今天小编就为大家分享一篇layui 地区三级联动 form select 渲染的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
select三级联动
08-23
清晰简洁的省市区三级联动
jquery -- select美化--多级联动下拉
04-03
jQuery 插件编写的select三级联动，多级联动，修改方便，扩展方便
纯CSS的三级联动级联菜单
06-09
纯CSS的三级联动级联菜单，很实用的纯CSS的三级联动级联菜单
select框 多级联动
dq0817_的博客
01-19 939
数据表结构 id,city_name,pid(父级ID) 控制器代码 $city = City::where('pid',0)->select(); return View::fetch('index/save',['data'=>$city]); 前端 <lable>地区</lable> <select name="city[]" id="first"> <option va
HTML+CSS+JavaScript实现全国三级城市select选择
weixin_51351637的博客
03-13 4075
简单的制作选择目录
select onChange事件
热门推荐
fendo
05-27 2万+
select onChange事件，实现效果为,选择下拉框中的一个把他显示出来. select onChange事件 切换 上海市 北京市 兰州市 广州市
Select的OnChange()事件
灰豆宝宝.net的专栏
04-07 4104
我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件....掌握了它的特性后,相应的解决办法也很简单.请选择Item 1Item 2Item 3function bao(s){    txt.value+=s;    //选择后,让第一项被选中
动态联动select下拉框实现
直到世界的尽头
05-22 2万+
我们在做下拉框选择时，常常会遇到一种场景，就是需要两个下拉框，其中一个下拉框的选项和内容需要根据第一个的下拉框的选择动态变化。比如我有大的分类:有氧运动  无氧运动选择有氧运动时，选项有：跑步，游泳选择无氧运动时，选项有：深蹲，卧推本章记录如何实现动态联动select下拉框实现。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录动态联动se
vant-ui实现三级联动
10-28
vant-ui可以通过van-tree-select、van-cascader和picker等组件来实现三级联动。 1. van-tree-select组件可以实现树形结构的选择器，通过设置items属性来传入数据源，通过设置bind:click-nav和bind:click-item来监听选择事件，从而实现三级联动。 2. van-cascader组件可以实现级联选择器，通过设置options属性来传入数据源，通过设置@change事件来监听选择事件，从而实现三级联动。 3. picker选择器可以通过设置columns属性来控制选择器的级数和每一级的选项，通过设置@change事件来监听选择事件，从而实现三级联动。 以上三种方式都可以实现三级联动，具体使用哪种方式取决于具体的需求和数据结构。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值