【LayUI】下拉选择框动态取值

神奇的鲨鱼

已于 2022-03-10 09:50:51 修改

阅读量2.7k

点赞数 1

分类专栏： Layui 文章标签： layui

于 2022-02-08 10:29:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56271075/article/details/122819164

版权

Layui 专栏收录该内容

2 篇文章

订阅专栏

一、页面写入select下拉框

<html>
 <head></head>
 <body>
  <label class="layui-form-label">仓库</label> 
  <div class="layui-input-inline" style="width:110px;"> 
   <select name="StorageNumber" lay-filter="StorageNumber" id="StorageNumberList" lay-verify="required"> <option value="">请选择仓库</option> </select> 
  </div>
 </body>
</html>

二、编写js代码从后台访问集合数据加载到下拉框

<script>
        //JS
        layui.use(['element', 'layer', 'util', 'laydate', 'form'], function () {
            var element = layui.element
              , util = layui.util
              , laydate = layui.laydate
              , form = layui.form
              , laycy = layui.$;

            laydate.render({
                elem: '#Storge_Date',
                type: 'date',
                value: new Date().toLocaleDateString()
            });
            laycy.ajax({
                url: '/StockOI/getCRKInfoDataList',
                dataType: 'json',
                type: 'post',
                success: function (data) {
                    laycy.each(data, function (index, item) {
                        laycy('#StorageNumberList').append(new Option(item));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");
                }, error: function () {
                    alert("仓库列表加载失败")
                }
            });
        });
</script>

三、后台返回List数据

//出入库基本数据加载
        
        [AllowAnonymous]
        public JsonResult getCRKInfoDataList()
        {
            List<storehouse> shs = shservice.GetModels(p => true).OrderByDescending(p => p.HouseNo).ToList();
            List<string> nos = new List<string>();
            for (int i = 0; i < shs.Count; i++)
            {
                nos.Add(shs[i].HouseName);
            }
            return Json(nos, 0);
        }