layui中的select下拉框,数据加载出来了,下拉框里面却没有数据,是什么原因?(已解决)

这个问题坑了我很久了。
错误显示:

layui中的select下拉框,数据加载出来了,下拉框里面却没有数据,是什么原因?(已解决)_第1张图片
我们可以看到竟然没有把数据添加进去。

layui中的select下拉框,数据加载出来了,下拉框里面却没有数据,是什么原因?(已解决)_第2张图片

当我们检查的时候数据是有的

layui中的select下拉框,数据加载出来了,下拉框里面却没有数据,是什么原因?(已解决)_第3张图片
但dl里的数据就没有了,说明是没有渲染出来。

解决方法:

看代码:

html代码:

 

<div class="layui-input-inline"  >
            <select name="quiz2" id="quiz2"  lay-filter="quiz2">
                  
            </select>
        </div>
js代码:


 function show(selectval) {
        $.get("/Home/selectContent?classificationName=" + selectval, function (data) {

            var content = '';
            content += '';
          
            for (var key in data) {
                var jsonstr = data[key];
              
                content += ''
            }
           
            $("#quiz2").html(content);
            layui.form.render('select');  //这里就是我们要渲染的地方了
           
        });

    }

调用方法:

//选择框的点击事件

 form.on('select(select)', function (data) {
        var  txtval = data.elem[data.elem.selectedIndex].text;//获取选中的文本值。
        show(txtval);
          
    });

实现效果:

layui中的select下拉框,数据加载出来了,下拉框里面却没有数据,是什么原因?(已解决)_第4张图片

这解决了。

全网页代码:

@{
    ViewBag.Title = "trvalYouJi";
}
@using DAL_BJ
@{

    classification_dal classification_dal = new classification_dal();
    List<classification> classificationslist = classification_dal.classificationsist();
    content_dal _Dal = new content_dal();

}
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="~/layui/css/layui.css" rel="stylesheet" />
<link href="~/Content/trvalYouji.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="~/utf8-asp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/utf8-asp/ueditor.all.min.js"></script>
 
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<form class="layui-form" action="/Home/trvalYouJi" method="post" enctype="multipart/form-data">
    <div class="layui-form-item" style="margin-top:20px;position:absolute">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width:800px;">
        </div>
    </div>


    <div class="layui-upload-drag" id="test10" style="margin-top:70px;border:1px solid  #808080 ;">
        <label class="layui-form-label" style="color:black;margin-left:-10px;">图片上传</label>
        <i class="layui-icon"></i>
        <p>点击上传,或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
            <img src="" alt="上传成功后渲染" style="max-width: 196px">
        </div>
        <input type="hidden" name="imgurl" value="" />
    </div>

    <div class="layui-form-item" style="position:absolute;margin-top:50px;">
        <label class="layui-form-label">旅游分类</label>
        <div class="layui-input-inline  ">
            <select name="quiz1" id="quiz1" lay-verify="quiz1" lay-filter="select">
                <option value="">请选择省</option>
                @foreach (var item in classificationslist)
                {
                    <option value="@item.classificationName">@item.classificationName</option>

                }
            </select>

        </div>

        <div class="layui-input-inline"  >
            <select name="quiz2" id="quiz2"  lay-filter="quiz2">
                  
            </select>
        </div>

    </div>

    <div style="margin-top:100px;position:absolute;z-index:1;">
        <h3>内容</h3><br />
        <script id="editor" name="editor" type="text/plain" style="width:1000px;height:300px;">
        </script>
    </div>
    <div class="layui-form-item" style="margin-top:560px;position:absolute">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="~/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script type="text/javascript">
   
    function show(selectval) {
        $.get("/Home/selectContent?classificationName=" + selectval, function (data) {

            var content = '';
            content += '';
          
            for (var key in data) {
                var jsonstr = data[key];
              
                content += ''
            }
           
            $("#quiz2").html(content);
            layui.form.render('select');//渲染
           
        });

    }


    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');

    layui.use(['form', 'layedit', 'laydate', 'upload'], function (maxval) {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        var $ = layui.jquery
            , upload = layui.upload;
           form.render();
        //拖拽上传
        upload.render({
            elem: '#test10'
            , url: 'https://httpbin.org/post' //改成您自己的上传接口
            , done: function (res) {
                layer.msg('上传成功');
                $("input[name='imgurl']").val(res.files.file);
                console.log($("input[name='imgurl']").val());
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                console.log(res)
            }
        });
        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            },
            quiz1: function (val) {
                alert(val);
            }
        });
        

        //选择框的点击事件
        form.on('select(select)', function (data) {
            var  txtval = data.elem[data.elem.selectedIndex].text;//获取选中的文本值。
            show(txtval);
              
        });
    
        //监听提交
        form.on('submit(demo1)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

    });

</script>

你可能感兴趣的:(layui中的select下拉框,数据加载出来了,下拉框里面却没有数据,是什么原因?(已解决))