2. 程式人生 > >左右兩個下拉框裏的內容互換

左右兩個下拉框裏的內容互換

阿新 • • 發佈：2017-07-29
htm ntb 並且 oct size 內容 utf tel value 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <select id="left_slt" size="7" multiple="multiple" style="width: 150px;">
            <option>ABC</option>
            <option>123</option>
            <option>xyz</option>
            <option>IJK</option>
        </select>
        <input type="button" id="to_right" value="向右" />
        <input type="button" id="to_left" value="向左" />
        <select id="right_slt" size="7" style="width: 150px;"></select>
    </body>

</html>
<script>
    var
 
 left_slt = document.getElementById(‘left_slt‘);
    var right_slt = document.getElementById(‘right_slt‘);

    document.getElementById(‘to_right‘).onclick = function() {
            for(var i =0;i<left_slt.selectedOptions.length;){
                    right_slt.appendChild(left_slt.selectedOptions[i]);
                    
                }
        
        
    }
    document.getElementById(
 
‘to_left‘).onclick = function() {
            for(var i =0;i<right_slt.selectedOptions.length;){
                    left_slt.appendChild(right_slt.selectedOptions[i]);
                    
                }
        
        
    }
</script>

利用下拉菜單的方法在某一個框裏寫入一些內容，然後利用selectedoption或者selectedindex來選中某一框內的某一內容appendChild將選中的內容加入到另一個框中。可以通過input的方法定義兩個按鈕：向左移還是向右移，並且在從一個框移到另外一個框後所以移動的內容會直接在原框內刪除。增加了用戶的體驗性!

左右兩個下拉框裏的內容互換

相關推薦

左右兩個下拉框裏的內容互換

htm ntb 並且 oct size 內容 utf tel value <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &

react 兩個下拉框巢狀查詢

需求：如下圖所示，在年級複選框的前提下區分成全部，上架，下架三個選項首先我們在之前下拉框後增加一個下拉框，如果值比較少，可以手動寫好在onselect中實現對應的事件方法取到我們選擇的值，接下來我們需要在state中存放一個變數用來儲存onselect變化時選擇的value值

Easyui多個下拉框聯動效果

code this .com cti 下拉框聯動 reload tex count 多個 好久沒寫前端了，以前在做多級聯動的時候，用的是easyui的tree結構，但是需要一次性全部加載，不是按需加載，性能不好，退而求其之，用多個下拉框做 eayui的combobox 有

關於頁面做個下拉框

function changeStatus(id,status) { if(status ==3){ var html= ‘’ +’ ’ +‘ 全/新舊砂確認’ +’ ’ + ‘請選擇’ + ‘全新砂’ + ‘全舊砂’ + ‘新舊比7:3’ +

多個下拉框z-index層級影響的問題解決

什麼是z-index?定義和用法z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。註釋：元素可擁有負的 z-index 屬性值。註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！寫這篇文章

使用ajax給頁面的多個下拉框動態賦值

 一。前臺頁面 $.post("${ctx}/basedata/baseData.do?method=queryPlantUnitList",function(data){             var optionvalue=eval("("+data+")");

form表單提交多個下拉框獲取select選項值，name相同

<tr>                         <th>吃飯</th>                         <td>                             <select name=point id=point>

多個下拉框聯動及回顯（Jquery）

應用場景如下： 程式碼實現如下： <%@ page contentType="text/html;charset=UTF-8" import="java.util.*" language="java" %> <%@ include file="

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

basic xor class form for xid xcode ace 隨筆 需求描述：select下拉框的填充項，從後臺傳來的list中獲取 自黑一下：之前有篇隨筆，寫的是通過map傳到前臺，在前臺的select中的value屬性取值 用map的key，而selec

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

jQuery外掛實現select下拉框左右選擇_交換內容（multiselect2side） 的一些網站 (有時間整理)

http://blog.csdn.net/mexican_jacky/article/details/51151495 http://blog.csdn.net/nihaoma71121/article/details/50971672 http://www.t

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

/**選中的元素向右移動**/ function moveRight() { //得到第一個select物件 var selectElement = document.getEl

jquery 下拉框左右選擇

float center con charset lin ng- bsp head highlight html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g

angularjs 綁定多個屬性到下拉框

切換 bsp num ber type 普通 var .ajax activit 綁定下拉框 angularjs 代碼： //活動下拉切換 $scope.activityChange = function () {

Angularjs 關於在使用Angularjs的時候下拉框的第一個選擇為空白

如果資料時靜態的話需要去控制器中建立一個物件陣列,例如 $scope.num = [{id:"10"},{id:"20"},{id:"30"}];//下拉框的值 option標籤的程式碼為: <option ng-repeat="x in num" value="{{x.id}}

JavaScript解決select下拉框中的內容太長顯示不全的問題

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Ajax 的同步和非同步，下拉框 聯動 回顯第二個不能回顯成功

Ajax 的同步和非同步，下拉框 聯動 回顯第二個不能回顯成功 示例： 使用Ajax 實現下拉框聯動 回顯 出現呢只有第一個能夠回顯成功 其餘的都不能正常回顯。 原因 ：使用了Ajax的非同步 select的賦值再 非同步之前導致的 ( 賦值前個彈出 可以暫停賦值的執行順序 先載入後賦值 )

jq中怎樣動態選中和不選中下拉框內容

1，jq中怎樣動態選中某個下拉框內容 $('select[name="type"]').find('option[value="1"]').attr('selected','selected') 2,jq中怎樣不選中某個下拉框內容 $('select[name="type"]').fin

關於layui框架下拉框省市兩級聯動

廢話不多說，直接進入正題 第一步，引入相關檔案，具體請移步layui官網文件（https://www.layui.com/doc/） 第二步，在使用下拉框之前，需要在JS宣告form模板 layui.use('form', function(){ var form = lay

關於在使用Angularjs的時候下拉框的第一個選擇為空白

如果資料時靜態的話需要去控制器中建立一個物件陣列,例如 $scope.num = [{id:"10"},{id:"20"},{id:"30"}];//下拉框的值 option標籤的程式碼為: <option ng-repeat="x in num" value=