ajax从后端加载数据动态加载layui的select

最新推荐文章于 2024-01-02 21:42:19 发布

原创最新推荐文章于 2024-01-02 21:42:19 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何利用LayUI框架和AJAX技术实现实时从服务器获取数据并动态填充HTML下拉框。通过具体代码示例，详细展示了JavaScript与后端交互的过程，包括数据请求、解析及渲染。

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

上班没时间写，先放下代码。有空了更新。

JS部分

	<script>

	$(document).ready(function(){
		timer();
		var form,layedit,layer,laydate; 

		layui.use(['form', 'layedit','layer','laydate'], function(){
		            form = layui.form;
		            layer = layui.layer
		            layedit = layui.layedit
		            laydate = layui.laydate; 
		           	    var qryUrl = "http://localhost:8080/staff/getdeptlist";   //传入服务器要改这里
	    $.ajax({
	        url: qryUrl,
	        // data: params,
	        async: false,
	        dataType: "json",
	        success: function (data,htmlData) {
	        	JSON.stringify(data);
	            var role = document.getElementById("dept_id");  
	            for(var i=0;i<data.length;i++){
		            
	                var value = data[i].udDeptId;
	                var label = data[i].udDeptName;
	             //   alert(value+label);
	                
	                var option = document.createElement("option");  // 创建添加option属性
	                option.setAttribute("value",value); 			// 给option的value添加值
	                option.innerText=label;    						 // 打印option对应的纯文本 
	                role.appendChild(option);  					//给select添加option子标签
	                       			  
	            }
	            form.render("select");
	        },
	        error: function (data) {
	            $.gridUnLoading({message: "下拉框数据加载失败"});
	        }
	        
	    });
	    var key=$("#dept_hidden_id").val();
	   //  alert(key);
	   //  alert("#dept_id option[value='"+key+"']");
	    $("#dept_id option[value='"+key+"']").attr("selected","selected"); 
	    form.render("select");
		});
    });

//  var key1=$("#position_hidden_id").val();
//  var key2=$("#sex_hidden_id").val();
//  var key3=$("#rank_hidden_id").val();
//  var key4=$("#highest_education_hidden_id").val();
//  var key5=$("#state_hidden_id").val();
//  var key1= #dicts.keyValue('STAFF_POSITION',position_hidden_id);
//	alert(key1);
//  //根据值让option选中 
//   $("#position_id option[value='"+key1+"']").attr("selected","selected"); 
//  $("#sex_id option[value='"+key2+"']").attr("selected","selected"); 
//  $("#rank_id option[value='"+key3+"']").attr("selected","selected"); 
//  $("#highest_education_id option[value='"+key4+"']").attr("selected","selected"); 
//  $("#state_id option[value='"+key5+"']").attr("selected","selected"); 
function timer(){
	layui.use('laydate', function () {
        var laydate =  layui.laydate;
        var laydate1 = layui.laydate;
		var laydate2 = layui.laydate;
		var laydate3 = layui.laydate;
		var laydate4 = layui.laydate;
		
        //执行一个laydate实例
        laydate.render({
            elem: '#entry_time', //指定元素
            trigger: 'click'
        });
        laydate1.render({
            elem: '#regular_time', //指定元素
            trigger: 'click'
        });
        laydate2.render({
            elem: '#quit_time', //指定元素
            trigger: 'click'
        });
        laydate3.render({
            elem: '#birthday', //指定元素
            trigger: 'click'
        });
        laydate4.render({
            elem: '#start_time', //指定元素
            trigger: 'click'
        }) ;
    });
}
	</script>

Html5

			<div class='layui-form-item'>
				<label class='layui-form-label'>部门</label>
				<div class='layui-input-inline' >
					<select name="dept_id" id="dept_id">
						<option value=""></option>
					</select>
				</div>
			</div>

后台代码

    @RequestMapping("/getdeptlist")
    @ResponseBody
    public List<UdDeptMini> getDeptList() {
    	List<UdDeptMini> result = new ArrayList<UdDeptMini>();
    	return deptService.findAllDept();
    }

数据库就不放了，放下实体类吧

package com.udreamtech.admin.system.domain;

import java.util.Date;

import lombok.Data;

@Data
public class UdDeptMini {
	
	private Long UdDeptId;
	private String UdDeptName;
	
}