jquery --- 多选下拉框的移动(穿梭框)
生活随笔
收集整理的這篇文章主要介紹了
jquery --- 多选下拉框的移动(穿梭框)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果如下:
幾個注意地方:
1.多選下拉框需要添加 multiple
2.獲取選中的元素KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#?id option:selec…(#id option:not(:selected))
下面是代碼的各個部分實現, 方便引用,最后是總體代碼,方便理解
添加選中到右邊:
// 添加選中到右邊 $('#add').click(()=>{let $options = $('#select1 option:selected')let $remove = $options.remove();$('#select2').append($remove); })添加未選到右邊:
// 添加未選到右邊 $('#add_not').click(()=>{let $options = $('#select1 option:not(:selected)')let $remove = $options.remove();$('#select2').append($remove); })全部添加到右邊:
// 全部添加到右邊 $('#add_all').click(()=>{let $remove = $('#select1 option').remove()$('#select2').append($remove); })整體代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>.content{display: inline-block;margin-left:15px;}div span{display: block;margin-left:-15px;}#add,#add_all,#add_not,#remove,#remove_all,#remove_not{cursor: pointer;}#select1{width: 100px;height: 160px;}#select2{width:100px;height:160px;}</style> </head> <body><div class="content"><select multiple id="select1"><option value="1">選項1</option><option value="2">選項2</option><option value="3">選項3</option><option value="4">選項4</option><option value="5">選項5</option><option value="6">選項6</option><option value="7">選項7</option><option value="8">選項8</option></select><div><span id="add">選中添加到右邊>></span><span id="add_not">添加未選到右邊>></span><span id="add_all">全部添加到右邊>></span></div> </div> <div class="content" style="margin-left:30px;"><select multiple id="select2" ></select><div><span id="remove"><<選中刪除到左邊</span><span id="remove_not"><<添加未選到左邊</span><span id="remove_all"><<全部刪除到左邊</span></div> </div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> $(function(){// 添加選中到右邊$('#add').click(()=>{let $options = $('#select1 option:selected')let $remove = $options.remove();$('#select2').append($remove);})// 添加未選到右邊$('#add_not').click(()=>{let $options = $('#select1 option:not(:selected)')let $remove = $options.remove();$('#select2').append($remove);})// 全部添加到右邊$('#add_all').click(()=>{let $remove = $('#select1 option').remove()$('#select2').append($remove);})// 刪除選中到左邊$('#remove').click(()=>{let $options = $('#select2 option:selected')let $remove = $options.remove();$('#select1').append($remove);})// 刪除未選到左邊$('#remove_not').click(()=>{let $options = $('#select2 option:not(:selected)')let $remove = $options.remove();$('#select1').append($remove);})// 全部刪除到左邊$('#remove_all').click(()=>{let $remove = $('#select2 option')$('#select1').append($remove);}) }) </script></body> </html>參考《鋒利的jquery》P149~P151
總結
以上是生活随笔為你收集整理的jquery --- 多选下拉框的移动(穿梭框)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android-蓝牙AVRCP功能实现【
- 下一篇： 服务器iis自动停止,IIS应用程序池老