layui + thymeleaf 标签实现两级联动

一， 在 layui 的表单中，不能使用 onchang 事件，需要进行表单渲染。

1， 表单代码

<select id="salesname" name="sales" lay-filter="sales" lay-verify="">
    <option value="">-Please Select-</option>
    <option th:each="sales: ${salesList}" th:value="${sales.salesid}"  th:email="${sales.email}" >[[ ${sales.salesname} ]]</option>
</select>

.layui-readonly, .layui-readonly :hover {
    background-color: #efefef;
    color: #333 !important;
    cursor: not-allowed !important
}

2， js 代码

form.on('select(sales)', function(data){
    var salesEmail = $("#glname option:selected").attr("email");
    $("#salesemail").val(salesEmail );					
    form.render('select');//select是固定写法 不是选择器
});

3， salesList 是从后台的Model传递过来的 List<Sales>, 其中 Sales 类的部分字段如下：

public class Sales implements Serializable {

    private Integer salesid;

    private String salesname;

    private String email;
}

4，解释说明

①， lay-filter="sales" ： 监听单个事件，layui中只要绑定相同事件就可以了，上面代码绑定sales。

②， form.on('select(sales)', function(data){  ...  form.render('select');}  ： 绑定sales事件，并且使用form.render('select');渲染一下，表示单个事件；否则渲染整个form表单。

③， th:email ： 自定义属性，目的是为了保存 gl.email 的值，便于 js 读取。