其實就是實現一個多選下拉列表，然後將選中的選項顯示到相應的位置；
因爲主要是jQuery選中行爲的實現，所以，樣式結構就不多說啦，直接貼代碼啦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
<title>多選下拉</title>
</head>
<body>
<div class="zj-div">
<div class="btn">全部級別</div>
<ul>
<li class='list' v-for="item in myData">{{item}}</li>
</ul>
</div>
</body>
</html>li表單我這裏利用了vue進行了簡單的的雙向數據綁定，哈哈哈 也是很偷懶啦
*{
padding: 0px;
margin: 0px;
}
.zj-div{
position: relative;
left: 50px;
top: 50px;
}
.btn,li{
width: 200px;
height: 50px;
border: 1px solid #01bfda;
border-radius: 15px;
background: #000d16;
color:white;
line-height: 50px;
text-align: center;
font-size: 18px;
}
ul {
display: none;
width: 220px;
}
li {
list-style: none;
}
li:hover{
cursor: pointer;
background: #535a5c;
}
li[check="true"] {
background: #01bfda;
}有一點需要注意的是，因爲要實現多選，我想的是，選中的項與未選中的項通過不同的背景顏色進行區分；
所以就綁定了check屬性，當check='true'時，背景顏色不同；
下面就是重點啦，畫圈圈~~~
真的完全是利用自己的“強大”邏輯思維實現的，哈哈哈，也是很冗餘啦~
因爲不想直接引用組件，所以心血來潮就自己動手了，代碼中估計都能看出我的思考過程了吧~~~~
可以說是很費勁了，奈何因爲方法不熟悉加上不太瞭解如何優化，用的最笨的方法-----根據最後要達到的目標，考慮會出現的情況，完成的最初的版本但也是最好理解的版本（雖然我都嫌棄有點長）：
new Vue({
el:".zj-div",
data:{
myData:["全部級別","一級","二級","三級"],
}
})
$(document).ready(function(){
var len = $('ul').children('li').length;
$('.btn').click(function(e) {
$('ul').slideToggle();
e.stopPropagation();
}); //點擊.btn實現ul的收放
$(document).not($('.list')).click(function(e){
$('ul').slideUp();
}) //.not方法就是除去當前這個元素
//點擊頁面除了li的其他部分時，ul收起
for(let i = 0; i < len; i++){
var firstAll = $('ul').children().first();
var arr = []; //爲綁定.btn的值創建一個數組
$('li').eq(i).click(function(e){
e.stopPropagation(); //因爲事件冒泡機制，一定要注意取消時間冒泡
if($(this).attr('check')!=="true"){
if($(this).text()=="全部級別"){ //如果當前點擊的是“全部級別”，則所有的li背景都改變
$(this).attr('check','true');
$(this).siblings().attr('check',"true");
// arr.push($(this).text());
$('.btn').text($(this).text());
arr = ["一級","二級","三級"];
//此時.btn顯示"全部級別"
}else{
$(this).attr('check','true'); //如果當前點擊的li是其他的，則當前li背景改變
if(arr.includes($(this).text())){
$('.btn').text(arr); //分情況討論此時.btn應該如何顯示
}else{ //注意結合arr
arr.push($(this).text());
$('.btn').text(arr);
}
}
if($(this).text()!=="全部級別"&&firstAll.next().attr('check')=='true'&&firstAll.next().next().attr('check')=='true'&&firstAll.next().next().next().attr('check')=='true'){
$('ul').children().first().attr('check','true');
$('.btn').text($('ul').children().first().text());
} //if判斷語句，我覺得肯定有其他的方法，我這個簡直太簡單粗暴了，可是我還沒想到...
//這是我們應該考慮的一種情況，當其他幾項全選時，"全部級別"應該默認被選中
}else{
if($(this).text()=="全部級別"){ //同理，噹噹前元素被選中，再被點擊時要取消選中
$(this).attr('check','false');
$(this).siblings().attr('check',"false");
$('.btn').text($(this).text()); //注意此時，雖然.btn顯示爲"全部級別"
arr = []; //但實際上沒有任何元素被選中，所以arr實際爲空
}else{
$(this).attr('check','false');
$('ul').children().first().attr('check','false');
for(var a = 0 ; a < arr.length; a++){
if(arr[a] == $(this).text()){
arr.splice(a,1); //數組方法，刪除索引爲a的一個元素
$('.btn').text(arr);
if(arr.length == 0){ //如果arr數據爲空，那麼.btn顯示"全部級別"
$('.btn').text(firstAll.text())
}
}
}
}
}
})
}
})
見解也就添加到註釋裏面啦~~哈哈哈 反正也是自己看 吼吼吼~~~
好啦 效果圖：
慢慢的學習下來，我算是真的發現，好多東西，在真正動手前總覺得好像蠻簡單，可一旦入坑，就會陷入長久的困惑......
去做的過程中，總會發現新的問題~~~所以 我就記一下，免得下次又有同樣的需求，我又要重新思考 哈哈哈哈 也是很偷懶啦~~~畢竟 嗯 記憶力太差
That`s all~~
Happy Ending!!!