layui下拉框动态赋值(后台数据赋值下拉框)

layui下拉框动态赋值

        • html代码:
        • js代码:
        • 上图:

html代码:

<div class="layui-input-inline">
         <select id="service" name="service" lay-verify="required"  class="select">
                <option value="0" >请选择服务</option>
         </select>
</div>

js代码:

layui.use('form',function(){
     
  var $ = layui.jquery
  var form = layui.form
	    $.ajax({
     
	        url: '/service/select',
	        dataType: 'json',
	        type: 'post',
	        success: function(data) {
     
	            if (data!== null) {
     
	            	$("#service").empty();
                	$("#service").append(new Option("请选择服务", "0"));
	                $.each(data, function(index, item) {
                        
	                    $('#service').append(new Option(item));
	                });
	            } else {
     
	                $("#service").append(new Option("暂无数据", ""));
	            }
	            //重新渲染
	            form.render("select");
	        }
	    });
});

上图:

数据库数据
layui下拉框动态赋值(后台数据赋值下拉框)_第1张图片
前台样式
layui下拉框动态赋值(后台数据赋值下拉框)_第2张图片
注:后台数据加到List里面返回。

你可能感兴趣的:(javascript,html)