Javascript 如何在aurelia中将选项从一个选择移动到另一个选择?
我正试图在按钮的Javascript 如何在aurelia中将选项从一个选择移动到另一个选择?,javascript,html,aurelia,Javascript,Html,Aurelia,我正试图在按钮的点击上,将所选选项从select1移动到select2。这是我的HTML代码: <p> <select id="select1" size="10" style="width: 25%" multiple> <option value="purple">Purple</option> <option value="black">Black</option> <option val
点击上,将所选选项从select1移动到select2。这是我的HTML代码:
<p>
<select id="select1" size="10" style="width: 25%" multiple>
<option value="purple">Purple</option>
<option value="black">Black</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
<option value="grey">Grey</option>
</select>
</p>
<button type="button" click.delegate="trig()">Add</button>
<p>
<select id="select2" size="10" style="width: 25%" multiple>
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</p>
我必须在trig()
中放入什么,以便单击按钮将所选项目移动到另一个列表?我已根据您的用例添加了add
按钮。
请参考下面的链接,我已经更新了解决方案。我想你也在找同样的东西
如果您需要更多帮助,请对此进行评论。您可以循环浏览selectedColors1
并获取每个选定项目的索引。然后将它们推到color2
数组中,并将它们逐个从colors
数组中移除
演示:
HTML:
${color.name}
添加
${color.name}
看起来您正在点击我需要的内容,但我正在尝试通过单击按钮使其工作。你知道怎么做吗?再次感谢,我希望颜色移到其他列表并保留原始列表,我还希望能够将多种颜色移到其他列表我已更新解决方案。请参考我的答案,我已经更新了。欢迎链接到解决方案,但请在这里的答案中包含答案的必要部分。链接可能会变得无效,这将使答案毫无用处。
export class App {
constructor() {
}
trig() {
}
}
export class App {
colors1 = [
{ id: "purple", name: "Purple" },
{ id: "black", name: "Black" },
{ id: "orange", name: "Orange" }
];
colors2 = [
{ id: "white", name: "White" },
{ id: "red", name: "Red" },
{ id: "blue", name: "Blue" }
];
selectedColors1 = [];
selectedColors2 = [];
add() {
this.selectedColors1.forEach(selected => {
// get the index of selected item
const index = this.colors1.findIndex(c => c.id === selected);
this.colors2.push(this.colors1[index]); // add the object to colors2
this.colors1.splice(index, 1); // remove from colors1
});
}
}
<select multiple value.bind="selectedColors1">
<option repeat.for="color of colors1" model.bind="color.id">
${color.name}
</option>
</select>
<button type="button" click.delegate="add()">Add</button> <br />
<select multiple value.bind="selectedColors2">
<option repeat.for="color of colors2" model.bind="color.id">
${color.name}
</option>
</select>