首先,將下面的js**複製到乙個js檔案中(js檔名可以命名為selectmultip哦),並將其引入專案中即可
(
function()
)}, reload:
function
(id, data, setdata)
var e = document.
getelementbyid
(id)
; e.innerhtml = htm;
render
(e);
this
.setval
(id, setdata);}
, setval:
function
(id, str)},
getval:
function
(id),}
function
render
(e);
var choosevalue ="",
op;for(
var i =
0; i < e.length; i++
)else}}
//建立乙個隱藏的option標籤用來儲存多選的值,其中的值為乙個陣列
var option = document.
createelement
("option");
option.hidden =
true
; e.
(option)
; e.
removeeventlistener
("input"
, selchange)
; e.
addeventlistener
("input"
, selchange)
;//重新定義標籤基礎屬性的get和set方法,實現取值和賦值的功能
object.
defineproperty
(e,"val",,
set:
function
(value));
if(valrealarr.
tostring()
)});
}this
.options[e.length -1]
.text = e.param.arr.
tostring()
;this
.options[e.length -1]
.value = e.param.valarr.
tostring()
;this
.options[e.length -1]
.selected =
true;}
else},
configurable:
true})
//新增屬性choose 此屬性新增到option中用來指定預設值
e.val = choosevalue;
//新增屬性tip 此屬性新增到select標籤上
if(e.
hasattribute
("tip")&&
!e.tiped)
}function
selchange()
});}
else
this
.options[
this
.length -1]
.text =
this
.param.arr.
tostring()
;this
.options[
this
.length -1]
.value =
this
.param.valarr.
tostring()
;if(this
.param.arr.length >0)
else}}
)();
html**
"cretype"
multip
class
="selectpicker show-tick form-control"
>
select
>
呼叫方法,衝後台獲取資料,動態渲染
//獲取證件型別資訊
getcretypes:
function()
; obj.value=r.types[i]
.code;
obj.text=r.types[i]
.name;
data.
push
(obj);}
selectmultip.
reload
("cretype"
, data)
;// vm.cretypes = r.types;})
;},
關於動態渲染說明以及示例:
需要動態載入的select下拉選項我們往往非同步請求後台拿到資料後,對下拉選進行拼接,這個繁瑣的步驟已經在reload方法中做好了,我們只需要傳遞正確的資料就可以完成,下面舉個例子,假設我們使用jquery的ajax獲取後台資料:
我們**需要這麼寫:
$.
ajax
(]格式與字段直接傳遞,如果不是 特別注意 欄位名要一致
//假設我們拿到是資料是
var data =
for(
var i =
0;i < res.list.length;i++);
obj.value=res.list[i]
.id;
obj.text=res.list[i]
.name;
data.
push
(obj);}
selectmultip.
reload
(id, data,setdata);}
,})
設定值:
//引數一:標籤id
//引數二:設定的值,可以為字串"1,2,3"也可以是陣列[1,2,3]
selectmultip.
setval
("cretype"
, data)
取值
//引數:標籤的id
selectmultip.
getval
("cretype"
)
layui下拉多選formSelects使用方法
引入formselects v4樣式 系統使用者 註冊外掛程式 layui.config extend 使用外掛程式,在layui.use中新增formselects layui.use element laydate table layer form laypage upload tree for...
設定Select下拉多選框功能,賦值與繫結問題
專案需要所以更改select為多選下拉的選單選項.我用的是後台直接繫結 在前台aspx頁面直接寫乙個 在後台頁面直接寫乙個繫結的方法,如果為編輯的狀態時候,就傳引數flage為true,否則預設設定flase就行了.protected void binddropcq bool flage this....
vue element ui下拉多選驗證問題
最近做專案時,發現剛開啟彈框就出現了下拉多選的驗證,如下圖 經過網上搜尋,找到了兩種解決方案 第一種解決辦法 1 personneldescription 2 3 this.ruleformadd 第一種解決方案總結為兩點即 1.在校驗規則裡加type array 2.下拉多選框繫結的變數初始值設定...