layui select框动态展示option与拿值

最新推荐文章于 2024-09-18 18:17:02 发布

buling_Monster

最新推荐文章于 2024-09-18 18:17:02 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： struts2+jsp+layui

本文链接：https://blog.youkuaiyun.com/qq_42445139/article/details/84729982

struts2+jsp+layui 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用layui在页面上动态展示select框，并从数据库获取数据。通过示例代码展示了jsp和js的实现过程，特别是在弹出层中如何成功调用load函数加载select框。同时，讨论了如何在获取option的value值之外，还能捕获到显示的文字信息（如小红和小明），并提供了作者亲测有效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

真是我写到吐血才写出来的，分享给你们，希望有所帮助；
照例先看样式：
在这里插入图片描述

这里展示的小红和小明是数据库里的，

这是页面上layui jsp的代码

<div class="layui-form-item" >
				<div class="layui-inline">
					<label class="layui-form-label">指派给：</label>
					<div class="layui-inline">
						<select id="staff" name="staff" lay-filter="staff" lay-verify="required">					
						</select>
					
					</div>
				</div>

再看js的；这个是弹出层，我在success方法调用了程序入口外的function
load function的作用是加载我的select框

layer.open({
					type : 1,
					title : '指派操作',
					maxmin : true,
					shadeClose : true, // 点击遮罩关闭层
					area : [ '60%', '40%' ],
					fixed : false, // 不固定
					content : $('#form2'),
					shade : 0,
					success : function(layero, index) {
						$('#chcid').val(data.chc_id);// 编号
						load(); //调用我的load方法
						form.render('select');//这里进行一遍渲染
						
						
					}
					

				});

//加载select下拉框的方法，调用Ajax
function load(){
	// 加载角色
	$.ajax({
		type : "post",
		url : "路径",
		dataType : "json",//json格式
		async : false,//保持同步状态
		success : function(data) {//成功后拿到的data
			$(data).each(function (index,item) {
				console.log(item);  //在页面上看一下返回的参数
				var count=item.data.length; //得到所有数据的条数
				$('#staff').append("<option value='0'>请选择</option>"); //先拼接一个option ，用append
				for(var i= 0; i < count; ++i){  //进行循环拼接option
//					console.log(item.data[i].staff_id);  拿到里面的元素
//					console.log(item.data[i].staff_name); 拿到里面的元素
					$('#staff').append("<option value="+item.data[i].staff_id+">"+item.data[i].staff_name+"</option>");//进行拼接
				}
			})
			
		}
	});
}

展示完后，你们是不是特别想要拿到里面的值呢？
是不是除了option里面的value赋值的id，还想拿到外面的小红和小明呢？
其实我在百度上查的时候，找了很久都没有找到，乱七八糟的答案都有
下面这个是我亲测能实现的

// 指派的的submit按钮-监听事件
		form.on('submit(apobtn)', function(data) {	这是我点击确定按钮的，监听事件
			console.log(data);  //拿到值，打印一遍，看看里面是什么妖魔鬼怪
			var a=$("#staff").find("option:selected").text();//这个就是我要说的重点啦，拿到中文也就是你们的小红和小明
			var b=$("#chc_due_date").val();  //ps:这个跟大家补充一下，这个是拿到我layui 时间日期框的值，
			console.log(a,b);//可以看一下是否拿到了
			$.post('url', {
				"chc_due_id" : data.field.staff,//拿到option的value也就是我们存的id
				"chc_due_to" : a, 
				"chc_due_date" : b，//赋值我就不多说啦
				
			});

		});

终于完结啦，我这个深夜写博客的学生党