将选项列表附加到焦点选择答案

【问题标题】：attaching options list to focused select将选项列表附加到焦点选择
【发布时间】：2014-01-22 21:55:11
【问题描述】：

我有这些非常大的下拉列表 (1500) 项。我必须在单个页面上使用很多这样的大型下拉列表（每个列表 1500 个项目，每个对象 4 个列表，每页 150 个对象）。所有这些列表对于每个对象都是相同的。

不幸的是，客户需要这种结构，因此我正在寻找一种创建 4 个下拉列表并根据他们关注的选择框重用它们的好方法。

列表正在 razor 中创建：

var list = ViewData["List"] as IEnumerable<SelectListItem>;
IEnumerable<SelectListItem> selectEnumerable = null;

if(list != null)
{
    selectEnumerable = list.Select(x => new SelectListItem
    {
        Text = x.Text,
        Value = x.Value.ToString()
    }).OrderBy(x => Convert.ToInt32(x.Value));   
}

@Html.DropDownList("List", selectEnumerable)

我该怎么做？

【问题讨论】：

你的意思是当有人打开一个下拉列表时，它会填充它，但如果有人打开其他一个，它会清除上一个列表并填充选定的列表？我认为如果他们有一台旧机器，这对用户来说会有点笨拙。
@malik 是的。我可能会补充说，下拉列表是 jquery 组合框。如果这太笨重，还有其他建议吗？事实上，这个页面太慢了。
要么服务器完成工作，要么用户的计算机完成工作。根据用户机器的速度，您可以将其卸载给他们。但如果不是这样，当浏览器从数组中加载所有选择框时，用户可能会觉得他们的浏览器已经挂起。
服务器很慢，我们尝试了一个 ping 数据库的组合框，检索列表需要几秒钟。当存在 200,000 个节点时，前端变得非常慢。
我建议不要在点击时“移动”您的选择选项。添加和删除这么多节点可能会导致一些延迟。请参阅我的答案，了解您可以尝试的可能解决方案。

标签： jquery asp.net-mvc-3 razor

【解决方案1】：

如果你想在客户端做，那么一种方法是使用 jquery 的clone()

所以你要做的是，像你的问题一样加载第一个 select 盒子服务器端。然后创建 3 个其他 select 列表但将它们留空，并给它们一个相同的 class 属性，例如“我的列表类”。最后，在您的脚本文件中，您可以创建一个在启动时运行一次的函数。

JS：

  function LoadSelectLists()
  {
    var list = $("#sel1 > option").clone();
    $('.my-list-class').append(list);
  }

HTML：

<select id="sel1">
  <option value="a">opt1</option>
  <option value="b">opt2</option>
  <option value="c">opt3</option>
</select>
<select id="sel2" class="my-list-class"></select>
<select id="sel3" class="my-list-class"></select>
<select id="sel4" class="my-list-class"></select>

小提琴：http://jsfiddle.net/2WDcz/

【讨论】：