jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能示例
更新時(shí)間：2019年01月15日 09:50:36 作者：皮卡洛
這篇文章主要介紹了jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能,涉及jQuery+vue.js數(shù)據(jù)綁定及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能。分享給大家供大家參考，具體如下：
其實(shí)就是實(shí)現(xiàn)一個(gè)多選下拉列表，然后將選中的選項(xiàng)顯示到相應(yīng)的位置；
因?yàn)橹饕莏Query選中行為的實(shí)現(xiàn)，所以，樣式結(jié)構(gòu)就不多說(shuō)啦，直接貼代碼啦：
<!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">全部級(jí)別</div>
<ul>
<li class='list' v-for="item in myData">{{item}}</li>
</ul>
</div>
</body>
</html>
li表單我這里利用了vue進(jìn)行了簡(jiǎn)單的的雙向數(shù)據(jù)綁定，哈哈哈 也是很偷懶啦
*{
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;
}
有一點(diǎn)需要注意的是，因?yàn)橐獙?shí)現(xiàn)多選，我想的是，選中的項(xiàng)與未選中的項(xiàng)通過(guò)不同的背景顏色進(jìn)行區(qū)分；
所以就綁定了check屬性，當(dāng)check='true'時(shí)，背景顏色不同；
下面就是重點(diǎn)啦，畫圈圈~~~
真的完全是利用自己的“強(qiáng)大”邏輯思維實(shí)現(xiàn)的，哈哈哈，也是很冗余啦~
因?yàn)椴幌胫苯右媒M件，所以心血來(lái)潮就自己動(dòng)手了，代碼中估計(jì)都能看出我的思考過(guò)程了吧~~~~
可以說(shuō)是很費(fèi)勁了，奈何因?yàn)榉椒ú皇煜ぜ由喜惶私馊绾蝺?yōu)化，用的最笨的方法-----根據(jù)最后要達(dá)到的目標(biāo)，考慮會(huì)出現(xiàn)的情況，完成的最初的版本但也是最好理解的版本（雖然我都嫌棄有點(diǎn)長(zhǎng)）：
new Vue({
el:".zj-div",
data:{
myData:["全部級(jí)別","一級(jí)","二級(jí)","三級(jí)"],
}
})
$(document).ready(function(){
var len = $('ul').children('li').length;
$('.btn').click(function(e) {
$('ul').slideToggle();
e.stopPropagation();
}); //點(diǎn)擊.btn實(shí)現(xiàn)ul的收放
$(document).not($('.list')).click(function(e){
$('ul').slideUp();
}) //.not方法就是除去當(dāng)前這個(gè)元素
//點(diǎn)擊頁(yè)面除了li的其他部分時(shí)，ul收起
for(let i = 0; i < len; i++){
var firstAll = $('ul').children().first();
var arr = []; //為綁定.btn的值創(chuàng)建一個(gè)數(shù)組
$('li').eq(i).click(function(e){
e.stopPropagation(); //因?yàn)槭录芭輽C(jī)制，一定要注意取消時(shí)間冒泡
if($(this).attr('check')!=="true"){
if($(this).text()=="全部級(jí)別"){ //如果當(dāng)前點(diǎn)擊的是“全部級(jí)別”，則所有的li背景都改變
$(this).attr('check','true');
$(this).siblings().attr('check',"true");
// arr.push($(this).text());
$('.btn').text($(this).text());
arr = ["一級(jí)","二級(jí)","三級(jí)"];
//此時(shí).btn顯示"全部級(jí)別"
}else{
$(this).attr('check','true'); //如果當(dāng)前點(diǎn)擊的li是其他的，則當(dāng)前l(fā)i背景改變
if(arr.includes($(this).text())){
$('.btn').text(arr); //分情況討論此時(shí).btn應(yīng)該如何顯示
}else{ //注意結(jié)合arr
arr.push($(this).text());
$('.btn').text(arr);
}
}
if($(this).text()!=="全部級(jí)別"&&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判斷語(yǔ)句，我覺(jué)得肯定有其他的方法，我這個(gè)簡(jiǎn)直太簡(jiǎn)單粗暴了，可是我還沒(méi)想到...
//這是我們應(yīng)該考慮的一種情況，當(dāng)其他幾項(xiàng)全選時(shí)，"全部級(jí)別"應(yīng)該默認(rèn)被選中
}else{
if($(this).text()=="全部級(jí)別"){ //同理，當(dāng)當(dāng)前元素被選中，再被點(diǎn)擊時(shí)要取消選中
$(this).attr('check','false');
$(this).siblings().attr('check',"false");
$('.btn').text($(this).text()); //注意此時(shí)，雖然.btn顯示為"全部級(jí)別"
arr = []; //但實(shí)際上沒(méi)有任何元素被選中，所以arr實(shí)際為空
}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); //數(shù)組方法，刪除索引為a的一個(gè)元素
$('.btn').text(arr);
if(arr.length == 0){ //如果arr數(shù)據(jù)為空，那么.btn顯示"全部級(jí)別"
$('.btn').text(firstAll.text())
}
}
}
}
}
})
}
})
見(jiàn)解也就添加到注釋里面啦~~哈哈哈 反正也是自己看 吼吼吼~~~
好啦 效果圖：
慢慢的學(xué)習(xí)下來(lái)，我算是真的發(fā)現(xiàn)，好多東西，在真正動(dòng)手前總覺(jué)得好像蠻簡(jiǎn)單，可一旦入坑，就會(huì)陷入長(zhǎng)久的困惑......
去做的過(guò)程中，總會(huì)發(fā)現(xiàn)新的問(wèn)題~~~所以 我就記一下，免得下次又有同樣的需求，我又要重新思考 哈哈哈哈 也是很偷懶啦~~~畢竟 嗯 記憶力太差
That`s all~~
Happy Ending!!!
這里再給出一個(gè)完整示例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>chabaoo.cn 多選下拉</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div class="zj-div">
<div class="btn">全部級(jí)別</div>
<ul>
<li class='list' v-for="item in myData">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:".zj-div",
data:{
myData:["全部級(jí)別","一級(jí)","二級(jí)","三級(jí)"],
}
})
$(document).ready(function(){
var len = $('ul').children('li').length;
$('.btn').click(function(e) {
$('ul').slideToggle();
e.stopPropagation();
}); //點(diǎn)擊.btn實(shí)現(xiàn)ul的收放
$(document).not($('.list')).click(function(e){
$('ul').slideUp();
}) //.not方法就是除去當(dāng)前這個(gè)元素
//點(diǎn)擊頁(yè)面除了li的其他部分時(shí)，ul收起
for(let i = 0; i < len; i++){
var firstAll = $('ul').children().first();
var arr = []; //為綁定.btn的值創(chuàng)建一個(gè)數(shù)組
$('li').eq(i).click(function(e){
e.stopPropagation(); //因?yàn)槭录芭輽C(jī)制，一定要注意取消時(shí)間冒泡
if($(this).attr('check')!=="true"){
if($(this).text()=="全部級(jí)別"){ //如果當(dāng)前點(diǎn)擊的是“全部級(jí)別”，則所有的li背景都改變
$(this).attr('check','true');
$(this).siblings().attr('check',"true");
// arr.push($(this).text());
$('.btn').text($(this).text());
arr = ["一級(jí)","二級(jí)","三級(jí)"];
//此時(shí).btn顯示"全部級(jí)別"
}else{
$(this).attr('check','true'); //如果當(dāng)前點(diǎn)擊的li是其他的，則當(dāng)前l(fā)i背景改變
if(arr.includes($(this).text())){
$('.btn').text(arr); //分情況討論此時(shí).btn應(yīng)該如何顯示
}else{ //注意結(jié)合arr
arr.push($(this).text());
$('.btn').text(arr);
}
}
if($(this).text()!=="全部級(jí)別"&&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判斷語(yǔ)句，我覺(jué)得肯定有其他的方法，我這個(gè)簡(jiǎn)直太簡(jiǎn)單粗暴了，可是我還沒(méi)想到...
//這是我們應(yīng)該考慮的一種情況，當(dāng)其他幾項(xiàng)全選時(shí)，"全部級(jí)別"應(yīng)該默認(rèn)被選中
}else{
if($(this).text()=="全部級(jí)別"){ //同理，當(dāng)當(dāng)前元素被選中，再被點(diǎn)擊時(shí)要取消選中
$(this).attr('check','false');
$(this).siblings().attr('check',"false");
$('.btn').text($(this).text()); //注意此時(shí)，雖然.btn顯示為"全部級(jí)別"
arr = []; //但實(shí)際上沒(méi)有任何元素被選中，所以arr實(shí)際為空
}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); //數(shù)組方法，刪除索引為a的一個(gè)元素
$('.btn').text(arr);
if(arr.length == 0){ //如果arr數(shù)據(jù)為空，那么.btn顯示"全部級(jí)別"
$('.btn').text(firstAll.text())
}
}
}
}
}
})
}
})
</script>
</body>
</html>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun運(yùn)行上述代碼，測(cè)試運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
相關(guān)文章
jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫效果代碼分享(附源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫效果代碼分享(附源碼下載)的相關(guān)資料,需要的朋友可以參考下2016-03-03
jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法,涉及jQuery表單操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08
Select下拉框的問(wèn)題，想在選擇一個(gè)選項(xiàng)后，前臺(tái)顯示做出變動(dòng)，并且知道選擇的是第幾個(gè)選項(xiàng)。怎么解決這個(gè)問(wèn)題呢？下面小編給大家分享SelecT下拉框選中和取值的解決方法，需要的朋友參考下吧2016-11-11
jQuery在頁(yè)面加載時(shí)動(dòng)態(tài)修改圖片尺寸的方法
這篇文章主要介紹了jQuery在頁(yè)面加載時(shí)動(dòng)態(tài)修改圖片尺寸的方法,實(shí)例分析了jQuery操作圖片的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)頁(yè)碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁(yè)
本片文章教給大家用jQuery實(shí)現(xiàn)頁(yè)碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁(yè)，效果非常好而且沒(méi)有頁(yè)面刷新，需要的朋友學(xué)習(xí)下吧。2017-12-12
jQuery簡(jiǎn)單實(shí)現(xiàn)根據(jù)日期計(jì)算星期幾的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)根據(jù)日期計(jì)算星期幾的方法,涉及jQuery針對(duì)日期時(shí)間簡(jiǎn)單計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
jQuery實(shí)現(xiàn)頁(yè)面頂部顯示的進(jìn)度條效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁(yè)面頂部顯示的進(jìn)度條效果,以完整實(shí)例形式分析了jQuery基于animate與setTimeout定時(shí)觸發(fā)實(shí)現(xiàn)進(jìn)度條漸進(jìn)顯示功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12
利用jquery.getScript()跨域調(diào)用文件，具體說(shuō)這個(gè)文件可以是什么類型還有待于進(jìn)一步跟進(jìn)。2010-11-11
實(shí)例詳解jQuery的無(wú)new構(gòu)建
這篇文章運(yùn)用實(shí)例介紹了jQuery的無(wú)new構(gòu)建，小編感覺(jué)介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧。2016-08-08
這幾天玩兒著2048這個(gè)游戲，突然心血來(lái)潮想練習(xí)下寫程序的思路，于是乎就模仿做了一個(gè)，到目前位置還沒(méi)有實(shí)現(xiàn)動(dòng)態(tài)移動(dòng)，不是很好看，不過(guò)玩兒著自己模仿的小游戲還是蠻爽的，哈哈2015-03-03