html之select三级联动

最新推荐文章于 2024-06-17 09:40:09 发布
最新推荐文章于 2024-06-17 09:40:09 发布
阅读量8.6k 收藏 8
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43431024/article/details/83089057
版权

三级联动

三级联动的核心是onchange监听文本变化

主要逻辑：当第一个下拉框的内容发生变化时 凭借该文本框的当前内容拿到对应的下一个文本框的下拉内容，并且放入下一个下拉框以供选择，依次类推
而点击提交时凭借三个下拉框的数据进行请求数据

首先我们需要三个下拉框和一个提交按钮
复制代码请更改jquery.js文件路径

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>三级联动</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<div>
       <select id="select1" name="sname1" form="form3"   onchange="nianjibianhua();" style="width:200px;height:50px;"  >
       <!-- <option value='0'>请选择...</option> --></select>
       <select id="select2"name="sname2" form="form3" style="width:200px; height:50px;"  onchange="banjibianhua();"> </select>
       <select id="select3" name="sname3" form="form3" style="width:200px;height:50px;" onChange="xingmingbianhua();"> </select>
   	   <form  id="rfFrame" class="" action="" method="get">
          <button class=""  lay-submit="" lay-filter="topsearch"  onClick="tijiao();" style="height:50px; width:100px; background-color:#0FF; color:#000;">提交</button>
       </form>
       <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>  
 </div>
</body>
</html>

JS中这样写
循环添加option 并且在变化时清空
可以使用$.get()方法配合后台完成ajax三级联动

 <script type="text/javascript">
//页面加载时请求年级
window.onload=function(){
	//年级放入年级框
			data=["一年级","二年级","三年级"];
			nianjiquanbu=[];
			for(i=0;i<data.length;i++){
			 nianjiquanbu+="<option value=\"" + i+ "\" >"+data[i]+"</option>"
				
			}		
		$("#select1").html("<option value='c' >请选择...</option> "+nianjiquanbu);	 		
}			
	//当年级框值发生变化的时候
	 function nianjibianhua(){
		 $("#select2").empty();
		 $("#select3").empty();
		 xuanzhong1 = $('#select1 option:selected');
		 selectValue1 = xuanzhong1.val();
		 selectedText1 = xuanzhong1.text();
		if(selectedText1=="请选择..."){
			$("#select2").empty();
		 	$("#select3").empty();		
		}
		else{
			ding_moxing_banji();
		}

		}
	//将年级框变化请求来的数据放到班级里			
	function ding_moxing_banji(data){ 
			data=["1705","1706","1707"];
			banjiquanbu=[];
			for(i=0;i<data.length;i++){
			 banjiquanbu+="<option value=\"" + i+ "\" >"+data[i]+"</option>"
				
			}		
		$("#select2").html("<option value='c' >请选择...</option> "+banjiquanbu);	 		
	}
		
	//班级值变化的时候
	function banjibianhua(){
		 xuanzhong2 = $('#select2 option:selected');
		 selectValue2 = xuanzhong2.val();
		 selectedText2 = xuanzhong2.text(); 
		if(selectedText2=="请选择..."){
			$("#select2").empty();
		 	$("#select3").empty();	
			$("#select2").html("<option value='c' >请选择...</option> "+banjiquanbu);		
		}else{
			ding_moxing_xingming();
		}
	}
	//将班级值变化请求来的数据放到学生框子里
	function ding_moxing_xingming(data){ 
			data=["叶凡","叶星辰","叶小天"];
			xingmingquanbu=[];
			//alert(JSON.stringify(data));
			for(i=0;i<data.length;i++){
			 xingmingquanbu+="<option value=\"" + i+ "\" >"+data[i]+"</option>"
			}		
	$("#select3").html("<option value='c' >请选择...</option> "+xingmingquanbu);	 		
	}
	//获取名字框内容
	function xingmingbianhua(){
		 xuanzhong3 = $('#select3 option:selected');
		 selectValue3= xuanzhong3.val();
		 selectedText3 = xuanzhong3.text();	
	}
	function tijiao(){
				alert(selectedText1);
				alert(selectedText2);
				alert(selectedText3);	
	}
</script>
一念花开丶君临天下
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html select联动,select标签实现二级联动
weixin_39735012的博客
06-07 1871
效果如下图所示：实现的原理：使用onchange事件，原理见代码html代码：魏国蜀国吴国script代码：var select = document.getElementById("select");select.onchange=function(){var selvalue = select.value;var val = document.getElementById("val");swi...
Html dom中的select, option_ 级联下拉列表
12-17
Dom查找_表单验证01_ 点击链接_添加一个div _表单验证02 _创建节点_ Html dom中的select, option_ 级联下拉列表；
使用css和html实现三级联动菜单
最新发布
qq_57218855的博客
06-17 254
注：可根据自己的需求进行样式的修改，这里的菜单栏联动主要用到了定位position。
HTML的级联Select
dongjizheng9270的博客
03-18 164
系统开发中，经常遇到级联Select的状况，而级联的Select Option数据一般记录于DB，如果每次都重新写一套级联Select，工作将是繁琐滴。。。 一般来说，写一套级联的Select的几个步骤： 从DB读取Select Option的级联数据 将数据封装成JSON或xml传到前台 在前台由JS动态组装/填充Select元素 用JS调整各个级...
php用ajax实现三级联动,使用ajax实现select三级联动功能
weixin_30286727的博客
04-01 245
这次给大家带来使用ajax实现select三级联动功能，使用ajax实现select三级联动功能的注意事项有哪些，下面就是实战案例，一起来看一下。本文利用ajax技术从数据库中获取数据，动态实现select三级联动，效果图如下：前端js代码如下：$(document).ready(function(){$.ajax({type:"get",dataType:"text",url:"GetItemA...
简单易懂的jquery版三级联动select
phantomes的专栏
12-01 2213
selectList *{margin:0;padding:0;} .selectList{width:200px;margin:50px auto;} 请选择 请选择 请选择
jQuery实现select级联
weixin_34395205的博客
09-11 133
使用Html5的数据属性(data-*)Map级联关系，代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Select级联</title> 5 <script src="https://code.jquery.com/jquery-1.1...
html5地区三级联动
03-19
在构建三级联动的过程中，`<select>`元素是基础，用于创建下拉菜单，而`<option>`元素则表示下拉菜单中的选项。然而，由于移动端的用户体验需求，单纯使用`<select>`元素可能无法满足滑动选择的效果，所以我们需要...
select2三级联动省市区
09-21
总的来说，实现`select2`三级联动省市区的功能，需要结合HTML、CSS、JavaScript以及后端提供的数据，通过`Select2`库的API来动态更新下拉菜单，提升用户在填写地理位置信息时的交互体验。这个过程既展示了前端技术的...
HTML城市三级联动与区域编码.zip
01-08
HTML城市三级联动是一种常见的网页交互设计，用于在用户选择省份时自动更新市、区的下拉选项，以实现快速定位。这种技术常用于地址输入、配送范围选择等场景，为用户提供便捷的操作体验。本资源“HTML城市三级联动与...
三级下拉列表 select 网页 html5
03-29
下面将详细介绍如何构建一个三级联动的下拉列表。 首先，我们要理解HTML5的`<select>`标签。`<select>`标签用于创建一个下拉列表，用户可以通过点击下拉箭头浏览并选择其中的选项。例如，一个简单的单级下拉列表...
ajax实现select三级联动效果
10-18
主要为大家详细介绍了ajax动态实现select三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现HTML中Select二级联动的实例
10-18
下面小编就为大家分享一篇js实现HTML中Select二级联动的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html+js实现地区三级联动下拉菜单
05-14
html+js实现地区三级联动下拉菜单代码和示例(无数据库，且包括中国所有地区),运行效率非常高，可以在所有的web程序中应用，非常方便，这是我自己开发的，希望大家能够喜欢。
Select2实现全国省市区三级联动下拉菜单
01-13
Select2实现全国省市区三级联动下拉菜单
三级联动选择器插件html
12-25
三级联动选择器插件html,支持鼠标点击和鼠标浮动选择。可以轻松引入到你需要的页面中。从VUE和element ui框架中拆出来的。。
js 省市区select 三级联动(全国城市三级联动下拉列表)
12-08
在网页开发中，有时我们需要实现一个功能，让用户能够选择省份、城市和区县，这种功能被称为“三级联动”。本文将详细介绍如何使用JavaScript实现全国城市三级联动下拉列表，并结合提供的资源进行解析。 首先，理解...
select实现三级联动
fengchengwu2012的博客
03-17 6739
一、先练习一下select option标签的使用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0
select联动案例联动三级html,简单实用jquery版三级联动select示例
weixin_42513602的博客
06-05 143
html和js部分selectList*{margin:0;padding:0;}.selectList{width:200px;margin:50px auto;}请选择请选择请选择请选择请选择请选择$(function(){$(".selectList").each(function(){var url = "area.json";var areaJson;var temp_html;var ...
html的select三级联动
06-07
三级联动指的是在选择一个下拉框选项后，下一个下拉框的选项会根据前一个下拉框的选项进行动态加载。具体实现可以参考以下示例代码： HTML代码： ```html <label>省份：</label> <select id="province"></select> <label>城市：</label> <select id="city"></select> <label>区县：</label> <select id="district"></select> ``` JavaScript代码： ```javascript // 省份数据 var provinceData = [ {name: '北京', code: '110000'}, {name: '天津', code: '120000'}, {name: '河北省', code: '130000'}, // ... ]; // 城市数据 var cityData = { '110000': [ {name: '北京市', code: '110100'}, ], '120000': [ {name: '天津市', code: '120100'}, ], '130000': [ {name: '石家庄市', code: '130100'}, {name: '唐山市', code: '130200'}, // ... ], // ... }; // 区县数据 var districtData = { '110100': [ {name: '东城区', code: '110101'}, {name: '西城区', code: '110102'}, // ... ], '120100': [ {name: '和平区', code: '120101'}, {name: '河东区', code: '120102'}, // ... ], '130100': [ {name: '长安区', code: '130102'}, {name: '桥西区', code: '130104'}, // ... ], // ... }; // 初始化省份下拉框 var provinceSelect = document.getElementById('province'); for (var i = 0; i < provinceData.length; i++) { var option = document.createElement('option'); option.value = provinceData[i].code; option.text = provinceData[i].name; provinceSelect.appendChild(option); } // 初始化城市下拉框 var citySelect = document.getElementById('city'); provinceSelect.onchange = function() { citySelect.innerHTML = ''; // 清空城市下拉框 var provinceCode = this.value; var cities = cityData[provinceCode]; for (var i = 0; i < cities.length; i++) { var option = document.createElement('option'); option.value = cities[i].code; option.text = cities[i].name; citySelect.appendChild(option); } // 触发城市下拉框的change事件，动态加载区县下拉框 citySelect.onchange(); }; // 初始化区县下拉框 var districtSelect = document.getElementById('district'); citySelect.onchange = function() { districtSelect.innerHTML = ''; // 清空区县下拉框 var cityCode = this.value; var districts = districtData[cityCode]; for (var i = 0; i < districts.length; i++) { var option = document.createElement('option'); option.value = districts[i].code; option.text = districts[i].name; districtSelect.appendChild(option); } }; // 页面加载完成后触发省份下拉框的change事件，动态加载城市下拉框 provinceSelect.onchange(); ``` 以上代码实现了一个简单的三级联动下拉框，可以根据实际需求进行修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值