前端
html
<input type="hidden" id="隱藏input的id" name="btroleval" value="${obj.roleid}"> <div class="layui-input-inline"> <select name="btrole" lay-filter="btrole" lay-search="" lay-verify="required" xm-select-show-count=1 xm-select="多選下拉框的id" xm-select-type="1" > <option value="">直接選擇</option> </select> </div>
js(寫在layui的funcion里,單獨渲染,不以組件的形式出現)
var formSelects = layui.formSelects; //獲取角色已選數組的字符串 var lis = $("#隱藏input的id").val(); //將字符串分割成字符串數組 var lisarr = lis.split(","); formSelects.config('formSelects的id',{ type: "post", linkage: true, linkageWidth: 130, searchUrl: '', //搜索地址, 默認使用xm-select-search的值, 此參數優先級高 /* searchName: '', //自定義搜索內容的key值 searchVal: '', //自定義搜索內容, 搜素一次后失效, 優先級高於搜索框中的值 */ keyName: 'text', //搜索框中的內容 keyVal: 'id', //自定義返回數據中value的key, 默認 value keySel: 'btrole', //自定義返回數據中selected的key, 默認 selected delay: 500, //搜索延遲時間, 默認停止輸入500ms后開始搜索 direction: 'auto', //多選下拉方向, auto|up|down response: { statusCode: 0, //成功狀態碼 statusName: 'code', //code key msgName: 'msg', //msg key dataName: 'data' //data key }, success: function(id, url, searchVal, result){ //已選數據的回顯 formSelects.value('btrole',lisarr,true); }, clearInput: false, //當有搜索內容時, 點擊選項是否清空搜索內容, 默認不清空 }).data('btrole','server',{ url: '<%=request.getContextPath()%>顯示信息的路徑' });
