layui下拉框(select)在mvc中的使用

在mvc视图中大多都是用强类型进行数据的绑定，一般下拉框都是使用DropDown绑定枚举。参考：https://www.cnblogs.com/CreateMyself/p/5424894.html

但是在使用layui框架的select中，如果视图还是用强类型进行数据绑定将会遇到以下两种情况

1. 下拉框怎么默认选中当前绑定的强类型对象的对应的下拉框选项值。
2. 下拉框选择变更时如何更新绑定的强类型对象给后端代码。

对以上问题的解决办法简单记录，下面用角色选择做举例。解决办法很简单，就是添加一个隐藏input元素绑定强类型对象属性，在ayui.use中通过js获取该元素使下拉框选中默认值，在监听下拉框选择事件中更新强类型对象的角色属性绑定的元素，即可实现双向绑定了。

<form class="layui-form" asp-controller="User" asp-action="SaveEdit" data-ajax="true" data-ajax-method="post" data-ajax-success="onSuccess">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <input type="hidden" id="Role" name="Role" value = "@Model.Role" />
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 20%">角色</label>
                    <div class="layui-input-block">
                        <select id="OptionRole" name="OptionRole" lay-filter="SelectRole" lay-verify="required">
                            <option value="">请选择一个角色</option>
                            <option value="Admin">管理员</option>
                            <option value="Operator">操作员</option>
                            <option value="Cashier">收银员</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>


<script>
layui.use(['form','jquery'],function(){
    let form = layui.form;
    let $ = layui.jquery;

    //选中当前角色
    var value =  $('#Role').val();
    $('#OptionRole').find("option[value="+value+"]").attr("selected",true);
    form.render('select');

    //选择角色更新@Model.Role
	form.on('select(SelectRole)', function(data){
        $('#Role').val(data.value);
	});

});

</script>

layui 根据根据后台数据动态创建下拉框并同时默认选中可参考：https://www.cnblogs.com/isuansuan/p/10638574.html