用js實現兩個select下拉框之間的元素互相移動

阿新 • • 發佈：2019-01-09

/**選中的元素向右移動**/ function moveRight() { //得到第一個select物件 var selectElement = document.getElementById("first"); var optionElements = selectElement.getElementsByTagName("option"); var len = optionElements.length; if

(!(selectElement.selectedIndex==-1)) //如果沒有選擇元素，那麼selectedIndex就為-1 { //得到第二個select物件 var selectElement2 = document.getElementById("secend"); // 向右移動 for(var i=0;i<len ;i++) { selectElement2.appendChild(optionElements[selectElement.selectedIndex]); } } else

{ alert("您還沒有選擇需要移動的元素！"); } } //移動所有的到右邊 function moveAll() { //得到第一個select物件 var selectElement = document.getElementById("first"); var optionElements = selectElement.getElementsByTagName("option"

); var len = optionElements.length; //alert(len); //將第一個selected中的陣列翻轉 var firstOption = new Array(); for(var k=len-1;k>=0;k--) { firstOption.push(optionElements[k]); } var lens = firstOption.length; //得到第二個select物件 var selectElement2 = document.getElementById("secend"); for(var j=lens-1;j>=0;j--) { selectElement2.appendChild(firstOption[j]); } } //移動選中的元素到左邊 function moveLeft() { //首先得到第二個select物件 var selectElement = document.getElementById("secend"); var optionElement = selectElement.getElementsByTagName("option"); var len = optionElement.length; //再次得到第一個元素 if(!(selectElement.selectedIndex==-1)) { var firstSelectElement = document.getElementById("first"); for(i=0;i<len;i++) { firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//被選中的那個元素的索引 } }else { alert("您還沒有選中要移動的專案!"); } } //全部向左移 function moveAllLeft() { var selectElement = document.getElementById("secend"); var optionElements = document.getElementsByTagName("option"); var len = optionElements.length; var optionEls = new Array(); for(var i=len-1;i>=0;i--) { optionEls.push(optionElements[i]); } var lens = optionEls.length; var firstSelectElement = document.getElementById("first"); for(var j=lens-1;j>=0;j--) { firstSelectElement.appendChild(optionEls[j]); } }

用js實現兩個select下拉框之間的元素互相移動

用js實現兩個select下拉框之間的元素互相移動

用js實現兩個日期的年跨度驗證

原生js 實現到搜尋的下拉框

多個select下拉框，選中當前某一項，其他下拉框去掉選中的值

使用select2實現多選select下拉框

jquery實現動態載入select下拉框

js實現兩個單選按鈕，選不同的選項彈出顯示不同的下拉框

中文輸入法觸發input事件 js繫結事件:addEventListener和on的區別 select下拉框用empty()方法清空option

java實現兩個select框內容左右移動，js例項

給select下拉框賦值，js實現

省市區三級聯動select下拉框，下拉框資料回顯 Demo js指令碼實現帶指令碼與案例,整理好了的下載既可用

純css實現select下拉框並排顯示

模擬select下拉框之多選（數據源采用模擬Ajax數據--原創）

Web前端：如何實現選擇select下拉框選中跳轉其他頁面

JS獲取select下拉框選中的value或者其name

js實現兩個文本框數值的加減乘除運算

基於bootstrap selectpicker ，實現select下拉框模糊查詢功能

浮動子div撐開父div的幾種方法、給select賦值、zoom樣式的含義、實現select下拉框readonly

select下拉框可以直接取list裏的內容不用非得轉map (不得不承認我是個ZZ，這麽簡單的問題才反應過來，--^--)

jquery及原生js獲取select下拉框選中的值示例

用js實現兩個select下拉框之間的元素互相移動

相關推薦