LayUI获取下拉框选择的值

前台渲染下拉框例如:$("select[name='sex']").empty();var optionD = '<option value = "">请选择...</option>';optionD += '<option value = "1">男</option>';optionD += '<option value = "0">女</option>';$("select[name='sex']").append(optionD);layui.form.render("select");HTML内容(以下是渲染后的内容)<div class="layui-inline">  <label class="layui-form-label">性别:</label>  <div class="layui-input-inline">    <select name="sex" lay-filter="sex" class="selectop">      <option value="">        请选择...      </option>      <option value="0">        男      </option>      <option value="1">        女      </option>    </select>    <div class="layui-unselect layui-form-select layui-form-selected">      <div class="layui-select-title">        <input type="text" placeholder="请选择..." value="" readonly="readonly" class="layui-input layui-unselect" /><i class="layui-edge"></i>      </div>      <dl class="layui-anim layui-anim-upbit" style="">        <dd lay-value="" class="layui-select-tips layui-this" style="">请选择...</dd>        <dd lay-value="0" class="">男</dd>        <dd lay-value="1" class="">女</dd>      </dl>    </div>  </div></div>获取下拉框所选值sex = $("select[name='sex'] option:selected").val(),// 获取下拉框值也可以使用form监控获取值    //    获取select下拉框的值    form.on('select(sex)', function (data) {        sex= data.value;        params.sex = sex;    })封装查询的实体function getSearchParam() {    var params = {};    var matkl = $("input[name='name']").val(),        labor = $("select[name='sex'] option:selected").val();// 获取下拉框值      if (name) {        params.name = name;    }    if (sex) {        params.sex = sex;    }    return params;}好处:第一种简单,需要在下拉框点击查询的时候才获取下拉框值;第二种用form.on监控select组件,只要选择值变动即能获取下拉框值。

前端上传文件相关HTML

场景,点选择文件,能在输入框显示所上传的文件名,第一想到的是原生的表单元素,如下:<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script>    $(function() {        $("#wenjian").change(function() {            $("#text").val($("#wenjian").val());        });         $("#browser").click(function() {            $("#wenjian").click();        });     });</script><input type="text" id="text" /><input type="file" id="wenjian" class="file" style="display: none;" /><input type='button' class='btn' value='浏览...' id="browser" />原生文件输入框“选择文件”按钮后会显示“未选择任何文件”等的文字,这因浏览器而异。于是只能隐藏而使用额外按钮去调用上传文件按钮,原生上传按钮隐藏,以上为jq版本,下方为js版本。<div class="button operating-button" id="fileUpdate-button">从Excel中批量导入</div><form action="" id ="fileUpdate-form">    <input type="file" name="filename" id="fileUpdate-input" style="display: none" /></form><script type="text/javascript">    //上传文件处理    var fileUpdate_button = document.getElementById("fileUpdate-button");    var fileUpdate_input = document.getElementById("fileUpdate-input");    var fileUpdate_form = document.getElementById("fileUpdate-form");    fileUpdate_button.onclick = function () {        fileUpdate_input.click();    }    fileUpdate_input.onchange = function () {        fileUpdate_form.submit();    }</script>另一种,通过CSS控制,让文件输入框隐藏,但是作用范围变大,即隐藏在文本输入框与按钮下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定义input type="file" 的样式</title> <style type="text/css"> body { font-size: 14px; } input { vertical-align: middle; margin: 0; padding: 0 } .file-box { position: relative; width: 340px } .txt { height: 22px; border: 1px solid #cdcdcd; width: 180px; } .btn { background-color: #FFF; border: 1px solid #CDCDCD; height: 24px; width: 70px; } .file { position: absolute; top: 0; right: 80px; height: 24px; filter: alpha(opacity:0); opacity: 0; width: 260px } </style> </head> <body> <div class="file-box"> <form action="" method="post" enctype="multipart/form-data"> <input type='text' name='textfield' id='textfield' class='txt' /> <input type='button' class='btn' value='浏览...' /> <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /> <input type="submit" name="submit" class="btn" value="上传" /> </form> </div> </body>