您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“如何用JavaScript實(shí)現(xiàn)下拉列表選擇框”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
創(chuàng)建一個(gè)頁(yè)面
** 兩個(gè)下拉選擇框
- 設(shè)置屬性 multiple屬性 -multiple="multiple"(下拉選擇框多行顯示)
** 四個(gè)按鈕,有事件
tip:多選按住ctrl或者shift點(diǎn)擊選項(xiàng)
代碼如下:
<html > <head> <title>HTML示例</title> <style type = "text/css"> div#left{ float:left; } </style> </head> <body> <div id="left" "> <div > <select id="select1" multiple="multiple" > <option>AAAAAA</option> <option>BBBBBB</option> <option>CCCCCC</option> <option>DDDDDD</option> <option>EEEEEE</option> </select><br/> </div> <div> <input type="button" value="選中添加到右邊" onclick="selToRight()"/><br/> <input type="button" value="全部添加到右邊" onclick="selAllRight()"/> </div> </div> <div id="right"> <div > <select id="select2" multiple="multiple" > <option>FFFFFF</option> </select><br/> </div> <div> <input type="button" value="選中添加到左邊" onclick="selToLeft()"/><br/> <input type="button" value="全部添加到左邊" onclick="selAllLeft()"/> </div> </div> </body> <script type="text/javascript"> // 選中添加到左邊 function selToLeft(){ //獲取左邊select對(duì)象 var s1 = document.getElementById("select1"); //獲取右邊select對(duì)象 var s2 = document.getElementById("select2"); //得到左邊select對(duì)象中的每一個(gè)option var ops = s2.getElementsByTagName("option"); for(var i4=0;i4<ops.length;i4++){ op4=ops[i4]; if(op4.selected==true){ s1.appendChild(op4); i4--; } } } //全部添加到左邊 function selAllLeft(){ //獲取左邊select對(duì)象 var s1 = document.getElementById("select1"); //獲取右邊select對(duì)象 var s2 = document.getElementById("select2"); //得到左邊select對(duì)象中的每一個(gè)option var ops = s2.getElementsByTagName("option"); for(var i3=0;i3<ops.length;i3++){ op3=ops[i3]; s1.appendChild(op3); i3--; } } //全部添加到右邊 function selAllRight(){ //獲取左邊select對(duì)象 var s1 = document.getElementById("select1"); //獲取右邊select對(duì)象 var s2 = document.getElementById("select2"); //得到左邊select對(duì)象中的每一個(gè)option var ops = s1.getElementsByTagName("option"); for(var i2=0;i2<ops.length;i2++){ op2=ops[i2]; s2.appendChild(op2); i2--; } } //選中添加到右邊 function selToRight(){ /* 步驟: 1.獲取select里面的option -getElementByTagName()-返回一個(gè)數(shù)組 -遍歷數(shù)組,得到每一個(gè)option 2.判斷option是否被選中 -屬性selected,判斷是否被選中 -selected=true;選中 -selected=false;未選中 3.如果選中,把選中的添加到右邊 4.得到select2 5.添加選擇的部分 -appendChild()方法 */ //獲取左邊select對(duì)象 var s1 = document.getElementById("select1"); //獲取右邊select對(duì)象 var s2 = document.getElementById("select2"); //得到左邊select對(duì)象中的每一個(gè)option var ops = s1.getElementsByTagName("option"); //遍歷ops數(shù)組得到每一個(gè)option選中狀態(tài) for(var i1=0;i1<ops.length;i1++){ op1 = ops[i1]; //判斷每一個(gè)option中selected屬性是否選中 if(op1.selected == true){ //如果選中,添加到右邊select中 //-使用appendChild()方法 s2.appendChild(op1); //每次添加都會(huì)使數(shù)組長(zhǎng)度減一,i1++后長(zhǎng)度出現(xiàn)異常,所以我們要--; i1--; } } } </script> </html>
效果圖:
“如何用JavaScript實(shí)現(xiàn)下拉列表選擇框”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。