layui實(shí)現(xiàn)下拉復(fù)選功能的例子(包括數(shù)據(jù)的回顯與上傳)
一、layui下拉復(fù)選實(shí)現(xiàn)的背景:實(shí)現(xiàn)一個(gè)管理員擁有多個(gè)權(quán)限
二、 具體實(shí)現(xiàn):
//依賴資源 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.css" rel="external nofollow" /> <!-- 引入組件 --> <script src="${pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script> //頁(yè)面顯示 <div class="layui-inline"> <label class="layui-form-label" style="color: #666666;width: 70px">角色:</label> <div class="layui-input-block" style="width: 300px"> <select name="role_id" id="role_id" xm-select-height="36px" xm-select-search xm-select-skin="default" xm-select="sys_role" lay-filter="sys_role"> </select> </div> </div> //配置路徑 layui.config({ base: "${pageContext.request.contextPath }/src/layui-formSelects-master/dist/" //formSelects-v4.js的路徑 }).extend({ formSelects: 'formSelects-v4' }).use(['form','jquery','upload','layer','formSelects'],function(){ var form =layui.form,$ =layui.jquery,upload=layui.upload,layer=layui.layer,formSelects=layui.formSelects; //從后臺(tái)數(shù)據(jù)庫(kù)中查出后回顯 $.ajax({ url: "${pageContext.request.contextPath}/menu/queryall.action", type: "post", success: function (data) { var str= '${sys_user.role_id}'; str_arr= []; //str="1,2,3" str_arr= str.split(",");//獲取那些該選中的數(shù)據(jù) for(var i=0;i<data.data.length;i++){ if(data.data[i].status==1){ var option= new Option(data.data[i].role,data.data[i].id); //全部列表信息展示 } for(var j=0;j<str_arr.length;j++){ if(str_arr[j]==data.data[i].id){ option.setAttribute("selected",true);//確定哪些是選中的 } } } $("#role_id").append(option); } formSelects.render();//渲染效果 } , error: function () { alert("查詢用戶角色失敗") } });
以上這篇layui實(shí)現(xiàn)下拉復(fù)選功能的例子(包括數(shù)據(jù)的回顯與上傳)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 解決layui數(shù)據(jù)表格Date日期格式的回顯Object的問(wèn)題
- layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法
- 解決element ui select下拉框不回顯數(shù)據(jù)問(wèn)題的解決
- vue組件表單數(shù)據(jù)回顯驗(yàn)證及提交的實(shí)例代碼
- 詳解SpringMVC如何進(jìn)行數(shù)據(jù)回顯
- Android開(kāi)發(fā)之完成登陸界面的數(shù)據(jù)保存回顯操作實(shí)例
- Android TableLayout數(shù)據(jù)列表的回顯清空實(shí)現(xiàn)思路及代碼
- Springmvc數(shù)據(jù)回顯實(shí)現(xiàn)原理實(shí)例解析
相關(guān)文章
原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018
本文主要介紹了原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02antd?table長(zhǎng)表格出現(xiàn)滾動(dòng)條的操作方法
這篇文章主要介紹了antd?table長(zhǎng)表格如何出現(xiàn)滾動(dòng)條,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06JavaScript基礎(chǔ)系列之函數(shù)和方法詳解
經(jīng)常談?wù)撈鸷瘮?shù)和方法,也常常搞不清楚它們之間的界限,經(jīng)常把兩個(gè)混用,這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)系列之函數(shù)和方法的相關(guān)資料,需要的朋友可以參考下2021-09-09JavaScript利用生成器函數(shù)實(shí)現(xiàn)優(yōu)雅處理異步任務(wù)流
Generators?是?JavaScript?中的一種特殊函數(shù),它們可以暫停執(zhí)行并根據(jù)需要生成多個(gè)值,本文將詳細(xì)介紹?generators?的作用、用法以及與其他語(yǔ)言特性的配合使用,希望對(duì)大家有所幫助2023-07-07JavaScript mixin實(shí)現(xiàn)多繼承的方法詳解
這篇文章主要介紹了JavaScript mixin實(shí)現(xiàn)多繼承的方法,結(jié)合實(shí)例形式分析了mixin多繼承的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03CORS cross-origin resourse sharing跨域資源共享解決
這篇文章主要為大家介紹了CORS cross-origin resourse sharing跨域資源共享的解決方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04