layui 为什么不添加监听就无法显示单行选择框

新手上路,请多包涵

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>审核详情</title>
<script  src="../static/js/jquery.min.js"></script>
<link href="../static/css/font.css" rel="stylesheet">
<link href="../static/css/index.css" rel="stylesheet">
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../static/lib/layui/css/layui.css" media="all">
<script charset="utf-8" src="../static/lib/layui/layui.js"></script>
<script type="text/javascript" src="../static/js/index.js"></script>
<script src="../static/js/index.js" type="text/javascript"></script>

</head>
<body>
<div class="layui-card">

    <div class="layui-tab layui-tab-brief">
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">

                <form class="layui-form" id="form" >

                    <div class="layui-form-item">
                        <label class="layui-form-label">审核结果: </label>
                        <div class="layui-input-block">
                            <select name="state" lay-verify="required">
                                <option value=""></option>
                                <option value="0" selected="selected" >待定</option>
                                <option value="1">通过</option>
                                <option value="2">未通过</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button id="ResumeEvaluate" class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>


                    </div>
                </form>
            </div>

        </div>
    </div>

</div>
</body>

<script>

layui.use('form', function(){

var form = layui.form;
var id = getQueryVariable("resumeId");
    //监听提交
form.on('submit(add)', function(data){
     layer.msg(JSON.stringify(data.field));
     var str = JSON.stringify(data);
    $.ajax({
        url: "/xiexi/business/setState",
        dataType : "json",
        data: {
            id: id,
            state: $("#state").val()
        },
        success: res => {
            if(res.code == 200){
                alert("审核成功!")
            }else {
                alert("系统错误,请联系管理员!");
            }
        }
    })
     return false;
});

});

function getQueryVariable(variable)
{
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
    }
    return(false);
}

</script>

</html>

只使用ajax的话就没有显示输入框,只有显示文字(‘’审核结果’、‘提交’,‘重置’)

阅读 1.5k
3 个回答

当前问题写的太不清楚,建议有在线示例,可能能更好的帮助到你

已参与 「极客观点」 ,欢迎正在阅读的你也加入。

猜测可能是select添加了lay-verify标签,然后默认事件被拦截也向上传递,添加监听后select选择事件传递到了layui.form。
这样的设计优势是可以及时发现问题,缺点是必须写完整才能调试。

已参与 「极客观点」 ,欢迎正在阅读的你也加入。

感觉是因为使用了 lay-verify 导致元素被劫持,LayUI的 Form 表单模块会对劫持的表单组件进行重新渲染。你把 lay-verify 属性移除之后再试试看能不能渲染出来 <select> 元素。

确实还是需要提供一个截图或者一个在线demo

已参与 「极客观点」 ,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
logo
极客观点
子站问答
访问
宣传栏