Layui: select the drop-down box Echo

A. Demand scene analysis

　　Under marquee echo based layui under Thymeleaf template.

Second, get a drop-down box Layui standard, we need to fill in html content follows

<div class="layui-form-item">
  <label class="layui-form-label"><span class="color-red">* </span>发送对象：</label>
  <div class="layui-input-inline">
    <select id="edit_exam_school">
      <option value="">请选择</option>
      <Option value = "1"> University City, South China University of Technology </ option>
      <Option value = "2"> South China University of Wushan District </ option>
      <Option value = "3"> Zhongshan University Zhuhai Campus </ option>
      <Option value = "4"> Sun Yat-sen University City Campus </ option>
    </select>
  </div>
</div>

　　How layui html rendering results of the above?

Here select alternative elements are obtained from the background data through jquery, need to decide which one to select the dynamic results. Analyze the results of the rendering of the structure to obtain a dom tree as follows:

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

三、如何实现自动选择？

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

1.第一种方法(推荐)

if('[[${client.constomerStatus}]]'!=''){
　　//拿到后台select选择的value数据并转换成数字类型
    var constomerStatus=parseInt('[[${client.constomerStatus}]]');
　　//首先需要使用lay-value来确定需要设置哪个元素自动选择
    var select = 'dd[lay-value=' + constomerStatus + ']';
　　//触发点击事件，实现自动选择
    $('#edit_exam_school).siblings("div.layui-form-select").find('dl').find(select).click();
}

2.根据第一种方法可以衍生出第二种(好像没卵用)

// 遍历select
$("#edit_exam_school").each(function() {
　　//this代表的是<option></option>，对option再进行遍历
　　$(this).children("option").each(function() {
　　　　// 判断需要对那个选项进行回显
　　　　if (this.value == parseInt('[[${client.constomerStatus}]]')) {
　　　　　　console.log($(this).text());
　　　　　　// layui回显
　　　　　　var select = 'dd[lay-value=' + this.value + ']';
　　　　　　$('#edit_exam_school').siblings("div.layui-form-select").find('dl').find(select).click();
　　　　}
　　});
})

参考链接：https://blog.csdn.net/qq_33594380/article/details/79438026

　　第二种写法来源：https://blog.csdn.net/zpf_940810653842/article/details/83788782