我有一个带有两个选择字段的表格。第一个选择字段将列出项目,第二个选择字段将开始为空,但可通过从第一个选择字段中选择一个项目并按添加按钮来填充。您也可以这样做。您可以从第二个选择字段中选择一个项目,然后单击删除将其添加回第一个选择字段。最后,我希望第二个选择字段的所有值都处于一个用逗号分隔的隐藏形式框中。
过去,我使用javascript遇到过这样的示例,但是现在我需要它们,所以似乎找不到它们。有人知道有什么资料可以向我展示如何完成这样的工作吗?刚开始,我想使用ajax来做,但是我宁愿不加载另一个页面就去做。为我指出正确方向的任何帮助将不胜感激!预先感谢!
<form name="SelectItem">
<select name="SelectItem">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
</select>
<button>Add =></button>
<button><= Remove</button>
<select name="SelectedItems">
<option value=""></option>
</select>
</form>
答案 0 :(得分:2)
您可以使用jquery append()
来做到这一点:
$(document).ready(function(){
$('.add').click(function(){
$('#select1').find('option:selected').appendTo('#select2');
});
$('.remove').click(function(){
$('#select2').find('option:selected').appendTo('#select1');
});
});
答案 1 :(得分:1)
您可以在add()
元素上使用remove()
和select
方法:
const select1 = document.getElementById('select1')
const select2 = document.getElementById('select2')
const addItem = () => {
event.preventDefault();
if(select1.length === 0) return;
let itemIndex = select1.selectedIndex;
let item = select1.options[itemIndex];
select1.remove(itemIndex)
select2.add(item);
}
const removeItem = () => {
event.preventDefault();
if(select2.length === 0) return;
let itemIndex = select2.selectedIndex;
let item = select2.options[itemIndex];
select2.remove(itemIndex)
select1.add(item);
}
document.getElementById('addButton').addEventListener('click', addItem);
document.getElementById('removeButton').addEventListener('click', removeItem);
<form name="SelectItem">
<select name="SelectItem" id="select1">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
</select>
<button id="addButton">Add =></button>
<button id="removeButton"><= Remove</button>
<select name="SelectedItems" id="select2">
</select>
</form>
答案 2 :(得分:1)
下面是一种可以利用事件委托技术的相对简单的方法:
\377
const inSelectEl = document.querySelector('#in-item-list');
const outSelectEl = document.querySelector('#out-item-list');
const optionQuantity = inSelectEl.options.length;
const onClick = e => {
if (e.target.tagName !== 'BUTTON') {
return;
}
let a, b;
if (e.target.id === 'add') {
a = inSelectEl;
b = outSelectEl;
} else {
a = outSelectEl;
b = inSelectEl;
}
const selectedOption = a.options[a.selectedIndex];
b.options[b.options.length] = selectedOption;
}
document.querySelector('#container').addEventListener('click', onClick);