jquery --- 多選下拉框的移動(穿梭框)

效果如下:
在這里插入圖片描述

幾個注意地方:
1.多選下拉框需要添加 multiple
2.獲取選中的元素 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#?id option:selec\dots$ (#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">選中添加到右邊&gt;&gt;</span><span id="add_not">添加未選到右邊&gt;&gt;</span><span id="add_all">全部添加到右邊&gt;&gt;</span></div>
</div>
<div class="content" style="margin-left:30px;"><select multiple id="select2" ></select><div><span id="remove">&lt;&lt;選中刪除到左邊</span><span id="remove_not">&lt;&lt;添加未選到左邊</span><span id="remove_all">&lt;&lt;全部刪除到左邊</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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250961.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250961.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250961.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！