【学习笔记】下拉框ajax动态加载数据

最新推荐文章于 2022-03-12 17:53:29 发布

KVN_G

最新推荐文章于 2022-03-12 17:53:29 发布

阅读量201

点赞数

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/qq_44940503/article/details/112681792

版权

学习笔记专栏收录该内容

49 篇文章

订阅专栏

该博客展示了如何利用JavaScript和layui框架实现下拉框（select）的动态加载。通过AJAX异步请求获取商品类型数据，遍历并插入到<select>元素中，最后调用layui的form.render()方法确保数据正确渲染。

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

jsp:

<select name="type" id="select_type">
	<option>--选择类别--</option>
</select>

js:

<script>
	layui.use(['upload','layer','laydate','form'], function() {
		var layer = layui.layer;
		$ = layui.jquery;
		var form =layui.form;
		//商品类型数据请求
		$(function(){
			$.ajax({
				async:false,
				type:'post',
				url:'../type.do',
				dataType:'json',
				success:function(data){
				//console.log(data);
				$.each(data.data,function(n,value){
					console.log(value.ptn_name);
					$("#select_type").append("    <option>"+value.ptn_name+"</option>");
						});
					//下拉框ajax动态加载数据时，由于是懒加载，在加载完后必须加上form.render()
					form.render();
					}
				});
			});
		});
	</script>