精华内容
下载资源
问答
  • springboot项目里要用到下拉框动态更新的功能,这里记一下。子项的内容是从数据库中获取的字段。 一、最终效果 二、html <div class="layui-input-inline"> <select id="getGuid" name="Guid" lay-search...

    springboot项目里要用到下拉框动态更新的功能,这里记一下。子项的内容是从数据库中获取的字段。

    一、最终效果

    在这里插入图片描述

    二、html

    <div class="layui-input-inline">
       <select id="getGuid" name="Guid" lay-search style="width:190px;height:35px">
        <option value="">请选择</option>
       </select>
    </div>
    

    三、js部分

        function GuidInit() {
               $.ajax({
                 type: 'POST',
                 url: "log/getGuidList",
                 success:  function (data) {
                      $("#getGuid").empty();
                      $('#getGuid').append(new Option("请选择Guid"));
                      // 解析list变成json
                      var jsonData = JSON.parse(data); //jsonData是该下路下的所有区间(json格式)
                      for (var i = 0; i < jsonData.length; i++) {
                            $('#getGuid').append(new Option(jsonData[i]));
                      }
                  },
                 error: function () {
                       alert("sorry");
                  },
                 dataType : 'text',
                 contentType : 'application/json'
                 });
    
        }
    

    这里的getGuid是和select标签里的id对应

    四、java代码

        @ResponseBody
        @RequestMapping(value = "/getGuidList")
        public List<String> getGuidList(HttpServletResponse response) {
            List<String> list = new ArrayList();
            // 添加数据,这里我是通过数据库获取的list
            list.addAll(logcatService.getGuidList());
            response.setStatus(200);
            for (String str : list) {
                System.out.println("+++++++++++++++++++++" + str);
            }
            return list;
        }
    

    我这里返回的数据是List集合,当然返回json数据,直接返回字符串,后端拿到之后解析也可以。
    但是建议最好的处理方式是返回实体,数据存存取也是利用实体,这样处理起来就很方便专业。

    展开全文
  • layui下拉框动态加载

    万次阅读 2018-03-21 15:57:59
    layui.use(['form', 'upload'] , function () { var $ = layui.jquery , upload = layui.upload , form = layui.form; $.get(ctx + '/???/???', {}, function (data) { ...
    layui.use(['form', 'upload'] , function () {
        var $ = layui.jquery
            , upload = layui.upload
            , form = layui.form;
                $.get(ctx + '/???/???', {}, function (data) {
                    var $html = "";
                    if(data.data != null){
                        $.each(data.data, function (index, item) {
                            if (item.proType){
                                $html += "<option class='generate' value='" + item.id + "'>" + item.proType + "</option>";
                            }else{
                                $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                            }
                        });
                     $("select[name='???']").append($html);
                     //反选
                     $("select[name='???']").val($("#???").val());
                     //append后必须从新渲染
                     form.render('select');
                 }
            })
    })

    展开全文
  • layui 下拉框 动态获取数据

    千次阅读 2018-01-19 23:51:00
    //移除value值为1的下拉选项 grade.val("2"); //设置默认的选中状态 var maxGradeIndex=grade.find("option:last").attr("value"); //获取最后一个下拉选项的value值属性 var gradeText=grade.find("option:first")...

    $(function(){
    var grade=$("#grade");
    grade.append("一年级"); //添加下拉列表
    grade.append("二年级");
    grade.append("三年级");
    $("四年级").appendTo(grade); //添加下拉列表
    $("").val("4").text("五年级").appendTo(grade); //添加下拉列表
    $("").val("5").text("六年级").prependTo(grade); //追加下拉列表到开头
    $("option[value='1']").remove(); //移除value值为1的下拉选项
    grade.val("2"); //设置默认的选中状态
    var maxGradeIndex=grade.find("option:last").attr("value"); //获取最后一个下拉选项的value值属性
    var gradeText=grade.find("option:first").text(); //获取最后一个下拉选项的文本内容
    //grade.empty(); //清空下拉列表选项
    grade.change(function(){
    alert($(this).find("option[value='3']").text());
    });
    alert(gradeText);
    });

    转载于:https://www.cnblogs.com/qinweizhi/p/8319332.html

    展开全文
  • //获取最后一个下拉选项的value值属性 var gradeText=grade.find("option:first").text(); //获取最后一个下拉选项的文本内容 //grade.empty(); //清空下拉列表选项 grade.change(function(){ alert($(this).find(...

    $(function(){

    var grade=$("#grade");

    grade.append("一年级"); //添加下拉列表

    grade.append("二年级");

    grade.append("三年级");

    $("四年级").appendTo(grade); //添加下拉列表

    $("").val("4").text("五年级").appendTo(grade); //添加下拉列表

    $("").val("5").text("六年级").prependTo(grade); //追加下拉列表到开头

    $("option[value='1']").remove(); //移除value值为1的下拉选项

    grade.val("2"); //设置默认的选中状态

    var maxGradeIndex=grade.find("option:last").attr("value"); //获取最后一个下拉选项的value值属性

    var gradeText=grade.find("option:first").text(); //获取最后一个下拉选项的文本内容

    //grade.empty(); //清空下拉列表选项

    grade.change(function(){

    alert($(this).find("option[value='3']").text());

    });

    alert(gradeText);

    });

    展开全文
  • layui下拉框的使用

    万次阅读 2019-03-19 18:35:39
    div class="layui-form"> <select name="" id="" lay-filter="myselect"> <option value="zhang">张先生</option> <option value="wang">王先生</option>...
  • 今天小编就为大家分享一篇解决JavaScript layui 下拉框不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui下拉框赋值

    千次阅读 2018-02-08 11:44:00
    layui下拉框赋值 原创2017年11月08日 18:45:39 2087 1、定义下拉框 <div class="layui-input-block layui-form" lay-filter="selFilter"> <select id="sel" lay-verify="required" > ...
  • script src="../../lib/layui-v2.5.5/layui.js" th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script> <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.c...
  • 动态添加的 //解释: name用于form表单提交获取数据 , verify验证 <select name = 'gpBelongs' id='gpBelongs' lay-verify="required" lay-search=''> <option value="">请选择</option> &...
  • layui下拉框操作

    千次阅读 2018-06-21 13:40:59
    --layui 获取下拉框动态加载数据##start--&gt; &lt;script type="text/javascript"&gt; $.get("{:url('admin/xxx/xxx')}",{ xxx:xxx, },function(data){ console.log(data); ...
  • 目前layui下拉框支持输入的模糊查询,但是是从下拉框已有选项中查询,没有实现从后端接口的查询,那么,我们来解决这个问题 需要的提前了解的内容: 1.事件委托 链接 :https://www.jianshu.com/p/6fe074dfdc73 2. ...
  • 前端框架layui下拉框被遮挡问题

    万次阅读 2017-12-15 19:18:10
    在使用layui下拉框选项的时候发现有时候下拉框会被遮挡或者根本就出不来的现象于是看了一下审查元素发现原本的div只有这么大仔细找了一下发现是layui自带的class属性问题,overflow:hidden,所以下拉框出现的内容...
  • layui下拉框赋默认值

    千次阅读 2019-09-23 16:28:21
    <link href="/layuiadmin/layui/css/layui.css" media="screen" rel="stylesheet" type="text/css" /> <script src="/layuiadmin/layui/layui.js" type="text/javascript"> <form class="layui-form" action="...
  • layui 下拉框 联动多级 ajax取值方法

    千次阅读 2018-10-20 21:03:59
    layui 下拉框 联动多级 ajax取值方法   &lt;div class="layui-form-item" id="app_url" style="display: none;"&gt; &lt;div class="layui-inline"&...
  • layui下拉框总结

    千次阅读 2018-10-17 13:36:00
    <optgroup label="学生时代"> <option value="你的工号" selected >你的工号</option> <option value="你最喜欢的老师">你最喜欢的老师<...div class="layui-inline"> ...
  • layui 下拉框三级联动

    千次阅读 2018-11-23 15:32:24
    项目需要用layui的三级联动,自己瞎整了一下,做个记录 1.表结构设计 CREATE TABLE `dt_area` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键', `area_name` varchar(16) DEFAULT NULL COMMENT '...
  • layui下拉框数据渲染

    2020-04-10 14:39:11
    1.获取下拉框数据 $.post('', function (res) { let html = "<option value=''></option>"; $.each(res, function (i, t) { if ("" == t.id) { html += '<option value="' + t....
  • LayUI下拉框默认选中方法

    千次阅读 2020-04-23 14:29:34
    layui中有两种下拉框默认选中方法。注意两种方法必须加上form.render()才有效果。 1、方法一: $("#selectid").find("option[value="+value+"]").prop("selected",true); form.render(); 2、方法二: $("#...
  • 关于layui监听下拉框值得变化,大家都知道官方文档给我们提供了一个方法 form.on('select(demo)',function(data){ console.log(data.value)//打印当前select选中的值 }) 按照我之前的理解,监听下拉框值得变化,...
  • layui 下拉框指定选中项

    千次阅读 2020-01-02 20:33:14
    搞了两个多小时,各种方法都试过了,用原生JS及JQ都没用。 原生的方法: var o="d"; $("#select option[value='"+o...layui的方法: $("#selectList").find("option[value="+camera_id+"]").prop("selected"...
  • 方案一:layui下拉框分页插件 https://fly.layui.com/jie/29002/ 此插件我用了下浏览器缓存有问题,而且当下拉框数据量过万后,会一直渲染不出来,期待后期作者优化 如图下拉框效果: 引入js和css <...
  • layui下拉框select取消选中

    千次阅读 2020-12-11 16:51:07
    var select = 'dd[lay-value=""]'; $('#projectId').siblings("div.layui-form-select").find('dl').find(select).click();
  • layui 下拉框展示错误

    2019-04-22 15:45:40
    先展示错误的结果,第一个是我想要做到的效果,第二张图片,是实际中出现的问题。 怎么会出现这样的问题?一级的下拉项怎么没了? 我去,我能说些什么,这个是因为没有请选择那个最初的选择项。...
  • .layui-form-selectup dl { height: 192px; bottom: auto; }
  • formSelects-v4 layui下拉框多选方案

    千次阅读 2019-08-06 09:49:27
    formSelects-v4.js 基于Layui的多选解决方案 1、闲谈杂趣 v3传送门v3文档 其实思考了很久, 还是放弃了v3, 因为开发v3的时候很粗暴, 按照编程角度来看就是硬撸, 也怪自己实力有限, 所以反思了一下, 尝试着继续前行....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 720
精华内容 288
关键字:

layui下拉框动态选项