下拉框联动 类似于请求第一个框之后，携带参数请求后端接口，渲染第二个下来框

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量684 收藏 10
点赞数 10
分类专栏： 浅谈前端 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taiguolaotu/article/details/135939195
版权

在这里插入图片描述
直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1233</title>
	</head>
	<body>
		<div>
			<!-- <table>
				  <tr>
				  <td>
					<div class="mdui-col">
						<input>
						<select id="mySelect">
						   <option value="option1">选项1</option>
						   <option value="option2">选项2</option>
						   <option value="option3">选项3</option>
						</select>
					</div>
					</td>
					
					<td>
					 >   
					</td>
					
					<td>
					<div class="mdui-col">
					<input>
					</div>
					</td>
					</tr>		
			</table> -->
			
			
			   <div class="mdui-row-xs-5">
									<div class="mdui-col">
			                                <div class="label">产品分类</div>
			                                <div class="infotext">
			                                    <select name="id" id="typeZero" class="face-select"><option value="" selected="">---</option>
			                                        <option value="1">微波炉</option><option value="2">烤箱</option><option value="3">3L</option></select>
			                                 &gt;
											</div>
											
											</div>
											
											<div class="mdui-col">
			                               
			                                <div class="infotext">
			                                    <select name="id" id="typeOne" class="face-select"><option value="" selected="">---</option></select>
												 &gt;
			                                </div>
											</div>
											
											<div class="mdui-col">
			                               
			                                <div class="infotext">
			                                    <select name="id" id="typeTwo" class="face-select"><option value="" selected="">---</option></select>
												 &gt;
			                                </div>
											</div>
											
											<div class="mdui-col">
			                              
			                                <div class="infotext">
			                                    <select name="id" id="typeThree" class="face-select"><option value="" selected="">---</option></select>
												 &gt;
			                                </div>
											</div>
			                                
											<div class="mdui-col">
											
			                                <div class="infotext">
			                                    <select name="id" id="typeFour" class="face-select"><option value="" selected="">---</option></select>
												 &gt;
			                                </div>
			                            </div>
			</div>
			
		 <!-- <label for="leftSelect">左侧选项</label>
		   <select id="leftSelect" multiple size="5"></select>
		   
		   <button type="button" class="moveRightBtn">>>></button>
		   <br><br>
		   
		   <label for="rightSelect">右侧选项</label>
		   <select id="rightSelect" multiple size="5"></select> -->
		</div>
	</body>
</html>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$(document).ready(function() {
   // 初始化左边选项列表
   var leftOptions = ["Option 1", "Option 2", "Option 3"];
   $("#leftSelect").append($("<option/>").text("None"));
   $.each(leftOptions, function(index, value){
      $("#leftSelect").append($("<option/>").attr('value', index+1).text(value));
   });
   
   // 点击“>>”按钮将左边选中的选项移动到右边
   $(".moveRightBtn").click(function(){
      $('#leftSelect option:selected').remove().appendTo('#rightSelect');
   });
});



$(document).ready(function () {
    $('#typeZero').change(function () {
	
    // $('#typeZero').click(function () {
        // 在这里编写点击事件的处理逻辑
        console.log('下拉框被点击了');
        // 获取当前选中的值
        var typeZero = $(this).val();
        console.log('当前选中的值是：' + typeZero);
		
	
		  
	var res = [{"id":"1","name":"2"},{"id":"zhangsan","name":"lisi"}]
  
                    // 清空原有的下拉框内容
                    $('#typeOne').empty();

                    // 动态生成option元素并添加到下拉框中
      //               for (let i = 0; i < res.length; i++) {
						// debugger
      //                   var option = $('<option>---</option>');
      //                   // option.text( res.length[i].name); // 设置每个option的显示文本
      //                   option.val( res.length[i].id); // 设置每个option对应的值（如果有）
      //                   $('#typeOne').append(option);
      //               }
					
					
					//
					// $.each(res, function(i) {
					// 	// debugger
					//     console.log(res[i]);    
					// 		    console.log(res[i].name);    
					// 			 console.log(res[i].id);    
					// }); 
				
				// $('#typeZero').empty();
					
					//正确的
					$('#typeOne').empty();
					$.each(res, function(i) {
						var option = $('<option>---</option>');
						option.text(res[i].name); // 设置每个option的显示文本
						// option.val(res.[i].id); // 设置每个option对应的值（如果有）
						option.val(res[i].id); 
						$('#typeOne').append(option);
					}); 
					
					
	
				// $('#typeOne').empty();
				// var option = $('<option>---</option>');
				// var option1 = $('<option>---</option>');
				// $.each(res, function(i) {
					
				// 	option1.text(res[i].name); // 设置每个option的显示文本
				// 	// option.val(res.[i].id); // 设置每个option对应的值（如果有）
				// 	option1.val(res[i].id); 
				// 	option+=option1;
				// }); 
				// $('#typeOne').append(option1);
				
					
					
					// res.forEach(function (val) {
					// 	debugger
					//                 console.log(val)
					//             });
					
               
            }
        );
    });


	</script>

具体代码

$(document).ready(function () {
    $('#typeZero').change(function () {
        // 在这里编写点击事件的处理逻辑
        console.log('下拉框被点击了');
        // 获取当前选中的值
        var typeZero = $(this).val();
        console.log('当前选中的值是：' + typeZero);
        var params = {
            ID: typeZero,
            LEVEL: '1'
        };
        // 根据需要进行其他操作...
        //理解成请求的后端的接口的路径 完事了 （'productManage.ProductType@getType）
        f.doAjaxResult('productManage.ProductType@getType"', params,
            function (res) {
                console.log('请求结果：' + res);
                if (res.TYPE != null && res.TYPE != undefined && res.TYPE != '') {
                    // 清空原有的下拉框内容
                    $('#typeOne').empty();

                    // 动态生成option元素并添加到下拉框中
                    // for (let i = 0; i < res.TYPE.length; i++) {
                    //     var option = $('<option>---</option>');
                    //     option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                    //     option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                    //     $('#typeOne').append(option);
                    // }

                    $.each(res.TYPE, function(i) {
                        var option = $('<option>---</option>');
                        option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                        option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                        $('#typeOne').append(option);
                    });

                }
            }
        );
    });


    $('#typeOne').change(function () {
        // 在这里编写点击事件的处理逻辑
        console.log('下拉框被点击了');
        // 获取当前选中的值
        var typeZero = $(this).val();
        console.log('当前选中的值是：' + typeZero);
        var params = {
            ID: typeZero,
            LEVEL: '1'
        };
        // 根据需要进行其他操作...
        f.doAjaxResult('productManage.ProductType@getType"', params,
            function (res) {
                console.log('请求结果：' + res);
                if (res.TYPE != null && res.TYPE != undefined && res.TYPE != '') {
                    // 清空原有的下拉框内容
                    $('#typeTwo').empty();

                    $.each(res.TYPE, function(i) {
                        var option = $('<option>---</option>');
                        option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                        option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                        $('#typeTwo').append(option);
                    });
                }
            }
        );
    });


    $('#typeTwo').change(function () {
        // 在这里编写点击事件的处理逻辑
        console.log('下拉框被点击了');
        // 获取当前选中的值
        var typeZero = $(this).val();
        console.log('当前选中的值是：' + typeZero);
        var params = {
            ID: typeZero,
            LEVEL: '1'
        };
        // 根据需要进行其他操作...
        f.doAjaxResult('productManage.ProductType@getType"', params,
            function (res) {
                console.log('请求结果：' + res);
                if (res.TYPE != null && res.TYPE != undefined && res.TYPE != '') {
                    // 清空原有的下拉框内容
                    $('#typeThree').empty();

                    $.each(res.TYPE, function(i) {
                        var option = $('<option>---</option>');
                        option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                        option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                        $('#typeThree').append(option);
                    });
                }
            }
        );
    });

    $('#typeThree').change(function () {
        // 在这里编写点击事件的处理逻辑
        console.log('下拉框被点击了');
        // 获取当前选中的值
        var typeZero = $(this).val();
        console.log('当前选中的值是：' + typeZero);
        var params = {
            ID: typeZero,
            LEVEL: '1'
        };
        // 根据需要进行其他操作...
        f.doAjaxResult('productManage.ProductType@getType"', params,
            function (res) {
                console.log('请求结果：' + res);
                if (res.TYPE != null && res.TYPE != undefined && res.TYPE != '') {
                    // 清空原有的下拉框内容
                    $('#typeFour').empty();
                    $.each(res.TYPE, function(i) {
                        var option = $('<option></option>');
                        option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                        option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                        $('#typeFour').append(option);
                    });
                }
            }
        );
    });

});
taiguolaotu
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
接上篇，用select实现级联下拉框联动
qifengle327的博客
06-19 1085
最近做项目要用到级联下拉框联动，一开始用的是doubleselect，标签虽然挺好用，但是表单数据往后台传输，太困难了，没做出来，然后换的select下面 jsp： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
实时监控input框,实现输入框与下拉框联动的实例
08-28
该实时监控input框，实现输入框与下拉框联动的实例可以应用于实际项目中，例如电商平台的搜索功能、下拉框联动功能等等。 本文讲述了如何使用HTML、JQuery和PHP技术来实现实时监控input框，实现输入框与下拉框联动...
点击下拉列表值动态加载另外一个下拉列表
陌子曦的专栏
05-21 529
1.jsp页面，定义2个下拉列表 <select type='text' onchange = "getData();" style='width:145px;' name='typeName1' id='typeName1'></select> <select type='text' style='width:145px;' name='typeName' id='typeName'></select> 2.获取数据列表 // 形成下拉框
动态切换第二级下拉选择框内容，动态添加二级选择框内容
dianlu5775的博客
06-27 190
HTML代码 <select name="" value="" id="subselect"> <option id="sub" value="请选择商圈">请选择商圈</option> </select> 　　 先引入JQ库 <script src="https://ajax.as...
Vue实现select下拉框二级联动数据后台获取
Machineone1的博客
03-07 4606
change在表单内容发生改变时出发方法。然后在下面的methods中声明方法，通过this.form.ks获取到当前下拉框的数据。一、二级联动在vue中实现selected的二级联动取其实很简单，可以使用select下拉框的表单改变事件。然后调用后两级访问数据库的方法，获取到联动的数据，添加到对应的v-for循环对象中。：label是指遍历该元素对应的名字，也就是到时候下拉框中展示的内容。主要是使用v-for循环来对option进行动态追加。：value是指该元素对应的值，也就是传递到后台的值。
SpringBoot+Jquery+DataTables实现select改变数据联动加载（前后端全流程）
BADAO_LIUMANG_QIZHI的博客
06-20 984
场景 效果 实现 html页面代码 页面使用的是thymeleaf模板。 下拉框代码： <div class="form-group row col-md-6"> <label class="col-sm-2 col-form-label">退货发起方</label&gt...
select联动
m0_51343111的博客
08-17 784
下拉框联动
JavaScript实现获取select下拉框中第一个值的方法
10-18
主要介绍了JavaScript实现获取select下拉框中第一个值的方法,涉及javascript针对页面元素属性的相关获取操作技巧,需要的朋友可以参考下
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
11-26
例如“报告交付方式”包含固定交付时，第二个下拉框不可编辑，反之可以编辑，具体代码如下 报告交付方式： <select class="easyui-combobox" panelHeight="auto" style="width:195px" data-options="required:...
js实现下拉框二级联动
10-17
主要为大家详细介绍了js实现下拉框二级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决elementUI select multiple多选下拉框， 赋值和传值到后台处理操作
xiaoxie_life_study
12-22 1208
解决elementUI select multiple多选下拉框， 赋值和传值到后台处理操作：实现多选下拉框后，表单中的内容不在是字符串的类型，而是变成了数组的类型，点击添加按钮后，会报错的，因为原来该字段的类型是字符串，类型不匹配。
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 344
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 374
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 165
vue 自定义滚动条同步拖动（移动端）
Webkit简介以及工作流程
读心悦
07-10 331
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 691
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 317
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 203
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 468
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
vue ant select 两个下拉框联动 第一个选中第二个自动展开
07-15
对于Vue Ant Design中的两个下拉框联动，你可以通过监听第一个下拉框的选中事件来实现第二个下拉框的展开。具体步骤如下： 1. 在Vue组件中，先定义两个下拉框的数据和选中值： ```vue ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值