极四维博客

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 组件，只要选择值变动即能获取下拉框值。

2019/09/27 00:49 9494 1

前端上传文件相关 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>

2019/09/17 15:22 5656 0
© 2013-2022 Cway.top 版权所有粤ICP备18009017号

  • 皖公网安备 34082402000318号

    • Design By 橙色阳光. Powered By Z-BlogPHP.