layui渲染Select列表

1.引入

<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>

2.页面代码

<div class="layui-inline" style="width: 22%;">
      <label class="layui-form-label">文章分类</label>
          <div class="layui-input-inline" style="width: 66%;">
               <select name="category" id="categorys" lay-verify="required">
                     <option value="">请选择</option>
          </select>
      </div>
</div>
$.get("/category/findAll.do",{},function (data) {
            var list = data;
            var select = document.getElementById(‘categorys‘);
            if (list != null || list.size() > 0) {
               for (var c in list) {
                   var option = document.createElement("option");
                   option.setAttribute("value", list[c].id);
                   option.innerText = list[c].name;
                   select.appendChild(option)
               }
            };
            form.render(‘select‘);
        },"json");

3.控制层

@RestController
@RequestMapping("/category")
public class CategoryController{
 @RequestMapping("/findAll.do")
    public List<SysCategory> findAll(){
        List<SysCategory> categoryList = categoryService.findAll();
        return categoryList;
    }
}

4. 返回的数据

controller层返回的数据

[SysCategory(id=1, name=JavaSe), SysCategory(id=2, name=JavaEE), SysCategory(id=3, name=前端), SysCategory(id=4, name=其他)]

页面接收到的数据

[{"id":1,"name":"JavaSe"},{"id":2,"name":"JavaEE"},{"id":3,"name":"前端"},{"id":4,"name":"其他"}]

5.渲染结果

原文地址:https://www.cnblogs.com/Code-Handling/p/12123915.html

时间: 2024-11-09 15:26:10

layui渲染Select列表的相关文章

利用jQuery操作select列表选项的上移下移示例

导读:本文实现了一个简单的select列表选项的上移下移操作,可帮助读者了解jQuery选择器,节点操作的一些常用方法 实现的效果: 分享代码: 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MoveNode_Default" %> 2 3 <!DOCTYPE html PUBLIC &

WorldWind源码剖析系列:可渲染对象列表类RenderableObjectList

可渲染对象列表类RenderableObjectList用来存储与一个星球体相关联的全部的可渲染对象,继承自可渲染对象类RenderableObject.RenderableObjectList的类图如下所示. 该类所包含的主要的字段.属性和方法如下: protected ArrayList m_children = new ArrayList();//存可渲染的子对象的列表,对应属性ChildObjects不可浏览,属性Count返回可渲染的子对象的个数 string m_DataSource

javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表

原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包. JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合.一个对象以“{”(左括号)开始,“}”(右括号)结束.每个“名称”后跟一个“:”(冒号):“‘名称/值’对”之间使用“,”(逗号)分隔. 在开

select列表使用正则的小技巧(HIVE)

Hive 0.13.0之后,select列表支持正则表达式了.对于如下的应用场景 create table tb2 like tb1 insert overwrite table tb2 partition(dt=xx, hr=xx) select * from tb1 是不行的,因为后者是N个列,前者是N-2个列 之前只能 insert overwrite table tb2 partition(dt=xx, hr=xx) select c1, c2, c3, c4... from tb1 现

jquery选择器多值情况处理(取select列表选项的值)

//多个同名的select值 var s=$("select[name=dutylistall]"); var dutylistall=""; s.each(function(i,el){ //console.info(i); //console.info(el); //console.info($(el).find("option:selected").val()); if(i!=0){ dutylistall+=",";

layui之select的option叠加问题解决

小编我在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑,特贴上我的源码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>layui前端框架select

Vue学习计划(基础三)-class与style绑定,条件渲染和列表渲染

Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style绑定的多种方式 绑定class和style都是使用v-bind也就是: 无论是绑定class还是style,都有两种方式,一种是对象,一种是数组. class和:class是共存的 绑定示例 1.class对象绑定 <!-- 根据isActivity的真假,判断是否应用activity这个class

layui的select联动 - CSDN博客

要实现联动效果注意两点: 第一要可以监听到select的change事件: 第二异步加载的内容,需要重新渲染后才可以 正常使用. html结构: <form class="layui-form batchinput-form"  action="" id="box-form"> <div class="layui-form-item" ><div class="layui-input-i

Layui:select下拉框回显

一..需求场景分析 基于Thymeleaf模板下的layui下选框回显. 二.获得一个Layui标配的下拉框,我们需要在html中填写的内容如下 <div class="layui-form-item"> <label class="layui-form-label"><span class="color-red">* </span>发送对象:</label> <div class