zoukankan      html  css  js  c++  java
  • Layui:设置select下拉框自动选中某项

    1. 需求场景分析

    用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。

    2. Layui的select下拉框是怎么实现的

    • 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下:
    1.  
      <div class="layui-form-item">
    2.  
      <label class="layui-form-label"><span class="color-red">* </span>发送对象:</label>
    3.  
      <div class="layui-input-inline">
    4.  
      <select id="edit_exam_school">
    5.  
      <option value="">请选择</option>
    6.  
      <option value="1">华南理工大学大学城</option>
    7.  
      <option value="2">华南理工大学五山校区</option>
    8.  
      <option value="3">中山大学珠海校区</option>
    9.  
      <option value="4">中山大学大学城校区</option>
    10.  
      </select>
    11.  
      </div>
    12.  
      </div>
    • layui对以上html的渲染结果如何?

    此处select可供选择的元素是通过ajax从后台请求获得的,需要根据动态结果决定选择哪一个。分析一下渲染结果的结构,得到dom树如下:

    发现在layui-input-inline之下除了select之外又多了个layui-form-select的div。该div包含layui-select-title和dl两个孩子元素,select的选择事件可以通过点击dl下某个确定的dd元素实现。

    3. 如何实现自动选择?

    通过以上的分析结果可以得知,我们只要拿到自己想要选择的内容所在的dd元素并对它触发点击事件,即可实现select加载时自动选择操作。

    • 首先需要使用lay-value来确定需要设置哪个元素自动选择
    var select = 'dd[lay-value=' + data.schoolId + ']';
    •  触发点击事件,实现自动选择
    $('#edit_exam_school').siblings("div.layui-form-select").find('dl').find(select).click();
  • 相关阅读:
    HDU 3081 Marriage Match II
    HDU 4292 Food
    HDU 4322 Candy
    HDU 4183 Pahom on Water
    POJ 1966 Cable TV Network
    HDU 3605 Escape
    HDU 3338 Kakuro Extension
    HDU 3572 Task Schedule
    HDU 3998 Sequence
    Burning Midnight Oil
  • 原文地址:https://www.cnblogs.com/apolloren/p/9673005.html
Copyright © 2011-2022 走看看