今天boss讓我寫一個小功能，使用formSelects插件可以實現多選的下拉選框，然後根據選擇的數據進行查詢。
這是formSelects插件的下載地址：https://fly.layui.com/extend/formSelects/#download
首先引入css和js文件，然後全局聲明一次，就可以使用，如下代碼所示
<body>
<select name="select1" id="select1" xm-select="select1" xm-select-skin = "primary">
</select>//xm-select指定這個select是可以多選的並且使用了formSelect的樣式 xm-select-skin = "primary" 設定皮膚
</body>
<script type="text/javascript">
layui.config({
base: "這個地方填寫js的路徑，只需要到文件夾 要加一個/" 比如
base: "js/layui-v2.4.5/plugins/formSelects-v4/"
}).extend({
formSelects: 'formSelects-v4'//這個指定js的名字(不帶.js後綴)
});
然後就可以模塊化去使用啦
layui.use(["form","formSelects","table"],function(){
var table = layui.table;
var form = layui.form;
var formSelects = layui.formSelects;
//通過ajax動態查詢數據並將數據添加到select上
function f1(para1, para2) {
$.ajax({
type : "post",
url : "請求路徑",
dataType : "json",
data : {
"para1" : para1,
"para2" : para2
},
success : function(res){//res是後端返回的數據
if (res.code == 200) {
var data= res.data;
var keys = [];
for (var i = 0; i < data.length; i++) {
var temp = {
"name" : data[i].para1,
"value" : data[i].para2//這裏需要注意，value應該不同，否則在下拉框選擇數據的時候，選擇上的數據回事一樣的
}
keys.push(temp)
}
//由於formSelect需要的arr是[{"name":"shuju1","value":"shuju2"},{....},{...}]這樣的格式，所以上面這樣去處理
formSelects.data("select1", "local", {
arr : keys
});
}
}
});
}
});
</script>
處理數據的時候，也是看前輩的帖子學到的，我原本使用的是拼接html形式去處理的，但是在這個過程中，選擇完數據後多選框顯示的數據總是一樣的，所以我又換了一種形式去動態添加選項，但是還是出現同樣的問題，最後發現是data賦值的時候，value出現了一樣的值，設置值的時候就需要將值區別開就好了。