layui下拉框的样式,具体如下代码:
<div class="form-group form-row"> <label class="col-form-label col-lg-4">状态</label> <div class="col-lg-8"> <select class="layui-input" id="StateID" name="StateID"></select> </div> </div>
createSelect方法是根据url创建下拉框
createSelect()三个参数:selectId, url, value
selectId: form表单id url: 查询下拉框的url value: 设置值
//layui下拉框数据绑定 function LayuiCreateSelect(selectId, url, value) {//value 设置加载完成时所选定的值 //数据请求 $.post(url, function (data) { //判断id是否有"#" if (selectId.indexOf('#') != 0) { selectId = '#' + selectId; } $(selectId).empty();//清空该元素 //创建option for (var k in data) { $(selectId).append("<option value='" + data[k].id + "'>" + data[k].text + "</option>"); } //使用layui下拉框的必要代码 layui.use('form', function () { var form = layui.form; //设置选中值 if (value != undefined && value != null && value != '') { $(selectId).val(value); } form.render();//重载表单 }); }); };
通过createSelect方法绑定下拉框数据,第一个参数是下拉框的id,第二个参数是请求方法路径,具体如下代码:
createSelect(“StateID”, “selectServlet”);
创建一个类:SelectVo,具体如下代码:
public class SelectVo { private int id; private String text; public int getId() {return id;} public void setId(int id) {this.id = id;} public String getText() {return text;} public void setText(String text) {this.text = text;} public SelectVo(int id, String text) { super(); this.id = id; this.text = text; } }
下列代码就是在的完整代码:
//下拉框 private void selectState(HttpServletRequest request, HttpServletResponse response) throws IOException { //获取数据库数据 StateDao statedao = new StateDaoImpl(); List<State> state = statedao.findAll(); List<SelectVo> selectState = new ArrayList<SelectVo>(); SelectVo select = new SelectVo(0, "---请选择---"); selectState.add(select); for (State states : state) { select = new SelectVo(states.getStateID(), states.getStateName()); selectState.add(select); } JSONArray json = JSONArray.fromObject(selectState); response.setContentType("application/json;charset=utf-8"); PrintWriter writer = response.getWriter(); writer.println(json); }
---------------------------------------------------------------------------------------------------------------------------------------------------感谢观看!期待您的下次光临!