masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > js如何实现下拉菜单的左右移动（代码）

js如何实现下拉菜单的左右移动（代码）

不言
Lepaskan： 2018-08-13 17:19:31
asal
2149 orang telah melayarinya

本篇文章给大家带来的内容是关于js如何实现下拉菜单的左右移动（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

这里写图片描述

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //flag标实为全部移动(true) 还是选择性移动(false)
            function mymove(flag,lid,rid){

                var leftobj = document.getElementById(lid);//得到左边select元素对象 
                var rightobj = document.getElementById(rid);//得到右边select元素对象 

                for( var i = 0 ; i < leftobj.options.length ; i++ ){                    if(flag){
                        rightobj.appendChild(leftobj.options[i]);
                        i--;
                    }else{                        if( leftobj.options[i].selected ){
                            rightobj.appendChild(leftobj.options[i]);
                            i--;
                        }
                    }
                }
            }        </script>
    </head>
    <body>
        <input type="button" value="全部左移" onclick="mymove(true,&#39;rightid&#39;,&#39;leftid&#39;)"/>
        <input type="button" value="左移" onclick="mymove(false,&#39;rightid&#39;,&#39;leftid&#39;)"/>
        <input type="button" value="右移" onclick="mymove(false,&#39;leftid&#39;,&#39;rightid&#39;)"/>
        <input type="button" value="全部右移" onclick="mymove(true,&#39;leftid&#39;,&#39;rightid&#39;)"/>


        <hr>
        <select size="6" multiple="multiple" style="width: 50px; height: 120px;" id="leftid">
            <option>武汉</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>杭州</option>
            <option>黄石</option>
        </select>

        <select size="6" multiple="multiple" style="width: 50px; height: 120px; margin-left: 100px;" id="rightid">

        </select>


    </body></html>
Salin selepas log masuk

相关推荐：

jquery中如何实现串联addback()和end() （代码）

js中使用template模板引擎实现的一个例子（代码）

jquery中图片无序预加载的实现以及使用方法

Atas ialah kandungan terperinci js如何实现下拉菜单的左右移动（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
下拉菜单
sumber：php.cn
Artikel sebelumnya：jquery中如何实现串联addback()和end() （代码） Artikel seterusnya：js如何来导出以及导入excel？js导入导出excel的方法（纯代码）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Dalam paparan mudah alih, bagaimana saya boleh menutup bar navigasi ini apabila pengguna mengklik pada pautan? Apabila pengguna mengklik pautan untuk menyemak imbas tapak web, bar navigasi tidak ditutu...
daripada 2024-04-06 19:23:03
0
1
411
Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...
daripada 2024-04-06 15:49:33
0
1
319
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
PHPMailer menggunakan gmail dan XOAUTH2: Bagaimana untuk mendapatkan token penyegaran baharu secara automatik apabila token penyegaran semasa tamat tempoh? Saya bimbang tentang menggunakan Gmail dengan XOAUTH2 (PHPMailerWiki) dan Bagaimana untuk ...
daripada 2024-04-06 10:14:45
0
1
373
Fungsi JavaScript tidak mempunyai kesan pada klik butang Saya telah mencari di internet dan mencuba banyak perkara, tetapi saya terjebak pada masal...
daripada 2024-04-05 13:14:53
0
2
1433
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan