layui 使用日记（一）

矫情吗；* 2023-10-02 10:03 29阅读 0赞

#### 1、使用场景： ####

> layui弹框组件中，有一个form表单，其中的下拉框需要根据后台的接口动态的显示，在调完接口的成功回调中，需要获取下拉框的内容。

--------------------

#### 2.Layui下拉框之select动态数据Ajax ####

**下拉框代码：**

<div class="layui-form">
            <label class="layui-form-label">学校</label>
            <div class="layui-input-block">
                <select name="SchoolId" lay-verify="required" lay-filter="SchoolId" 
                  id="companyId" lay-search>
                    <option value="">请选择学校</option>
                </select>
            </div>
        </div>

**ajax逻辑代码：**

layui.use(['element', 'form'], function () {
      var element = layui.element,
          form = layui.form;
     
     $(function () {
                $.ajax({
                    async: false,
                    type: "POST",
                    url: ctxPath + 'school/selectAll',
                    success: function (result) {
                        if (result.code == 0) {
                            var list = result.data;
                            var s = '<option value="">请选择学校</option>';
                            $.each(list, function (i, xx) {
                                console.log(xx.name);
                                s = s + '<option value="' + xx.id + '">' + xx.name + '</option>';
                            });
                            $("#xxId").html(s);
                            form.render('select');
                        }
                    }
                });
            });
         });

--------------------

#### 3.获取下拉框内容 ####

form.on('select(SchoolId)', function(data){
                              console.log(111100);
                              sex= data.value;                                   //获取value值
    		                      text= data.elem[data.elem.selectedIndex].text;;    //获取显示的值
                              console.log("获取value值",sex,"获取显示的值",text);
                            console.log(data.elem); //得到select原始DOM对象
                            console.log(data.value); //得到被选中的值
                            console.log(data.othis); //得到美化后的DOM对象
                                    });

#### 4.注意事项 ####

在使用时需要注意：select标签的外层需要加上类名".layui-form"。不然无法生效

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210921043520348.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16