从 Web 应用程序的下拉列表中多选？答案

【问题标题】：multiselect from dropdownlist for web app?从 Web 应用程序的下拉列表中多选？
【发布时间】：2010-10-12 19:58:21
【问题描述】：

我正在构建一个 Web 应用程序，它会返回一个报告。对于用户请求下拉列表的某些参数，他们还希望能够一次选择多个选项。

例如显示来自 TX、WV 和 ID 状态的所有交易。

我决定使用他们要求的下拉列表而不是列表框的原因是他们可以选择 40 多个参数，而且我的页面已经塞满了这么多控件。

提前致谢。

【问题讨论】：

Multi-select dropdown list in ASP.NET 的可能重复项
没有复选框。尽可能接近老式的下拉列表。
老式的下拉列表不支持多选，也不是有意的。他们的UI并不是真的为那项任务，因为他们的列表框选择了一个项目时折叠。 span>

标签： asp.net drop-down-menu multi-select

【解决方案1】：

你不能直接用下拉列表来做，但你可以做的是伪造它。

在您的页面上有一个隐藏的列表框。构建一个看起来像下拉列表的东西（标签+图像可以工作）。在您的虚假下拉列表的 onclick 事件期间，在您的下拉列表下方显示您的列表框。在 ListBox 的 onblur 事件期间隐藏列表框。你也可以加入一些 jquery 来动画你的列表框的揭幕，以更接近下拉列表的外观。

【讨论】：

【解决方案2】：

试试这个：有一个未选中选项的下拉列表和一个选中列表框；类似于 anton lavey 的建议，但稍微不那么详细。

<style>
select { width: 200px; }
</style>
<body>
 <select id="sel" onchange="list.appendChild(this[this.selectedIndex]);">
  <option disabled>Select items from this list</option>
  <option value="a">a</option>
  <option value="c">c</option>
  <option value="d">d</option>
</select><br>
<select multiple="" id="list"><option value="b">b</option></select>
<button onclick="while(list.selectedIndex > -1) { sel.appendChild(list[list.selectedIndex]); }">Remove selected</button>
</body>

如果您扫描以找到正确的插入位置，则可以保留排序。

【讨论】：