【无标题】

Layui 给select 下拉选 重置

业务场景:

页面上有一个input框让人填写拒收数量，如果拒收数量大于0，那么就弹出拒收原因下拉选项， 让操作人员选择拒收原因，期间如果修改拒收数量，那么期望拒收原因会置为空（已经选择过拒收原因了）。
但是经过尝试，发现

$(“#reason”).val("");

并不能生效，而又不能直接刷新一边页面，那么填写的其他的内容就都消失了。

解决方法

页面代码：
<div class="layui-form-item">
        <label class="layui-form-label">拒收数量</label>
        <div class="layui-input-inline">
            <input type="text" id="rejectCount" lay-verify="required|number" placeholder="请输入拒收数量" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
<div class="layui-form-item">
        <label class="layui-form-label">拒收原因</label>
        <div class="layui-input-inline">
            <select id="reason" lay-search>
                <option value="">请选择拒收原因</option>
                <option value="1">客户拒收</option>
                <option value="2">运输破损</option>
                <option value="3">货物丢失</option>
                <option value="4">其他原因</option>
            </select>
        </div>
    </div>

JS代码：
$("#rejectCount").change(function(){
      var rejectCount = $("#rejectCount").val();
      //重置select下拉选
      **var select = 'dd[lay-value=\'\']';
      $('#reason').siblings("div.layui-form-select").find('dl').find(select).click();**
      if(rejectCount !='' && rejectCount != "0"){
          $("#reason").attr('lay-verify','required');
      }else{
          $("#reason").removeAttr('lay-verify','required');
      }
 })

问题完美解决。每次变更拒收数量都会，拒收原因下拉选中的内容就会变化。

参考文章