如何在兩個列表框之間移動項目？
[英]How to move items between two listboxes?
問題描述
<div class="data_wrap list-padding">
<div class="approveTermsContainer">
<div class="newItems"> <b>send</b>
<br />
<select multiple="multiple" id='lstBox1'>
<ul class="tree" multiple="multiple" id='lstBox1'>
<li>
<div class="btn-group" data-toggle="buttons"> </div> <a href="">heading test</a>
<ul>
<li>
<div class="btn-group" data-toggle="buttons"> </div> test <span rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="right" data-html="true" data-title="This is my tooltip!"><i class="fa fa-info-
circle"></i></span> </li>
</ul>
</li>
</ul>
</select>
</div>
<div class="transferBtns">
<input type='button' id='btnRight' value=' > ' />
<br />
<input type='button' id='btnLeft' value=' < ' /> </div>
<div class="approvedItems"> <b>receive</b>
<br />
<select multiple="multiple" id='lstBox2'> </select>
</div>
</div>
</div>
在上面的代碼中，我有兩個列表框。 即，listbox1，listbox2。 在哪里選擇 listboxes1 項目（標題測試），然后選擇 btn。 它必須移動到listbox2。
$(document).ready(function () {
$('#btnRight').click(function (e) {
var selectedOpts = $('#lstBox1 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox2').append($(selectedOpts).clone());
$(selectedOpts).remove();
e.preventDefault();
});
$('#btnLeft').click(function (e) {
var selectedOpts = $('#lstBox2 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox1').append($(selectedOpts).clone());
$(selectedOpts).remove();
e.preventDefault();
});
});
上面是jquery代碼，我試過了。 我在這里附上我的codepen代碼嗎？
5 個解決方案
解決方案1
0 2022-08-01 16:19:52
您的 JS 代碼是正確的，並且也有效。
您應該更改 select 元素中的 HTML 。
這是一些代碼作品演示。
<select multiple id='lstBox1'>
<option value="1">foo</option>
<option value="2">bar</option>
</select>
解決方案2
0 2022-08-01 16:22:56
在 HTML 代碼中，第一個 SELECT 元素有一個子元素，即 UL 元素。 據我所知，SELECT 元素的子元素是 OPTION 元素。 SELECT 元素內不應有 UL 元素。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select ：
每個菜單選項都由嵌套在 <select> 中的元素定義。 [...] 您可以在元素內進一步嵌套 <option> 元素，以在下拉菜單中創建單獨的選項組。
此外，您有具有相同 ID 的不同元素，並且代碼中沒有 OPTION 元素。
可能$('#lstBox1 option:selected'); 沒有按預期工作，因為：
- 元素
<select multiple="multiple" id='lstBox1'>和<ul class="tree" multiple="multiple" id='lstBox1'>具有相同的 ID (lstBox1)； - HTML 代碼中沒有 OPTION 元素（
option:selected從不匹配）；
當我嘗試驗證 HTML時，我收到了這些錯誤消息（除了其他錯誤消息）：
重復 ID lstBox1。
從第 6 行第 12 列開始； 到第 6 行第 61 列
<ul class="tree" multiple="multiple" id='lstBox1'>[...]
雜散開始標記 ul。
從第 6 行第 12 列開始； 到第 6 行第 61 列
ul class="tree" multiple="multiple" id='lstBox1'>[...]
在此上下文中，元素 select 中不允許出現文本。
從第 8 行第 70 列開始； 到第 8 行第 81 列
<a href="">heading test</a>元素 select 的內容 model：零個或多個選項、optgroup 和腳本支持元素。
改變
UL 元素在 SELECT 元素內部不可見，至少在 Firefox 中是不可見的。
將 UL 列表更改為 OPTION 元素，選項是可見的，您可以在不更改 jQuery 代碼的情況下移動它們。
<div class="data_wrap list-padding">
<div class="approveTermsContainer">
<div class="newItems"> <b>send</b>
<br />
<select multiple="multiple" id='lstBox1'>
<optgroup label="heading test">
<option value="test">test</option>
</optgroup>
</select>
</div>
<div class="transferBtns">
<input type='button' id='btnRight' value=' > ' />
<br />
<input type='button' id='btnLeft' value=' < ' /> </div>
<div class="approvedItems"> <b>receive</b>
<br />
<select multiple="multiple" id='lstBox2'> </select>
</div>
</div>
</div>
解決方案3
0 2022-08-02 08:44:39
我使用這個邏輯來做到這一點，它對我來說效果很好，只需將字符串附加到 select "<option>your selected option</option>"
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<select id="l1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="button" id="btn" value="click">
<select id="l2"></select>
</body>
</html>
<script>
$("#btn").click(function(){
debugger;
value = $("#l1").find(":selected").attr('value');
var appends='<option value="' +value + '">' + value + '</option>';
$("#l2").empty();
$("#l2").append(appends);
})
</script>
解決方案4
0 2022-08-03 04:36:12
我檢查了你的代碼它正在工作，只需刪除<optgroup>和<li> ，讓它變得簡單
<select multiple="multiple" id='lstBox1'>
<option value="test">test</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
解決方案5
0 2022-08-08 06:53:14
你可以實現你正在尋找的東西。 您需要進行一些更改。
這是一個應該如何構建以及應該如何表現的示例。
<select multiple id="list_1">
<option id="option_a">Option A</option>
<option id="option_b">Option B</option>
<option id="option_c">Option C</option>
</select>
<select multiple id="list_2">
//
</select>
<script>
function clickRight() {
var list = document.querySelector("#list_1").children;
var numOptions = list.length;
for (var i = 0; i < numOptions; i++) {
var option = list[i];
if (option.selected) {
document.querySelector("#list_2").appendChild(list.splice(i, 1));
numOptions—;
i—;
}
}
}
</script>
您還需要編寫clickLeft function。
如何在MVC的兩個列表框之間移動項目-JQuery無法正常工作
[英]How do you move items betwen two listboxes on MVC - JQuery not working
使用JavaScript在ASP.NET中的列表框之間移動項目的最佳方法，然后在服務器端訪問結果
[英]best way to move items between ListBoxes in ASP.NET using javascript, then access results on server side
如何比較兩個數組項並替換，並移動到特定位置
[英]How to compare the two array items and replace,And also move to particular position
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.