layui + thymeleaf 标签实现两级联动

时间：2025-02-24 07:02:44

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

1， 表单代码

<select  name="sales" lay-filter="sales" lay-verify="">
    <option value="">-Please Select-</option>
    <option th:each="sales: ${salesList}" th:value="${}"  th:email="${}" >[[ ${} ]]</option>
</select>
.layui-readonly, .layui-readonly :hover {
    background-color: #efefef;
    color: #333 !important;
    cursor: not-allowed !important
}

2， js 代码

('select(sales)', function(data){
    var salesEmail = $("#glname option:selected").attr("email");
    $("#salesemail").val(salesEmail );					
    ('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。

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

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

 

相关文章