Question

我有一些网页显示了多个（最多几十个）工作项。每个工作项都是一个由多个字段组成的表单，其中两个字段是大型选项（一个约350项，另一个约650个选项），除最初选择的项目外总是相同的。

加载页面的速度可能很慢。其中一些可能是由于这些选择的每个副本都有24KB + 52KB的html，我打赌相当数量的浏览器构建基本相同的大块（大多数）没有兴趣）DOM一遍又一遍。

我认为可能更好的是只保留一个数组中每个选项的主副本，然后只用一个选项（最初选择的值）开始每个选择，例如：< / p>

<form ...>
  <input ...>
  <select class='dept_select' id='dept' name='dept' size='1'>
    <option value='12345' selected>Department of Banking and Finance
  </select>
  <select class='approver_select' id='approver' name='approver' size='1'>
    <option value='jpflat' selected>J. Pierpont Flathead
  </select>
</form>

然后当用户点击他们感兴趣的一个选择框时，从数组中构建其余的选择框。这是否合情合理，如果可能的话，是否有一些聪明而简洁的方法在jQuery中执行此操作，或者我将不得不从整个布料和原始JavaScript中发明它？ FWIW，选择之间没有真正的相关性（例如，选择状态限制了选择城市的有效选择）。

Answer 1

到目前为止我不打算发布代码。我建议稍微重新构建你的概念以获得更简单的结构：

用户一次只能编辑一个项目。只要不采取编辑操作，就不需要生成“几十种表格”。
将项目渲染为包含行和字段的简单二维数组，最好是在JSON
使用jQuery
如果用户想要编辑项目，请打开div图层，使用上面的数组将表单渲染到其中。当然只有一组这些下拉列表。
考虑根据AJAX的请求加载这些下拉列表或使用jQuery ui中的一些“组合框”功能（如下）。
on“save”提交表单并关闭div图层

在jQuery ui中可以使用某些容器和对话框来实现此目的。结果将是

更通用的代码
少开销
更好的可用性甚至

Answer 2

嗯，事实证明它并不像我想象的那么难......

<form ...>
<select id="ts" name="ts" size="1" class="tsc">
<option value="12345" selected>This is the initial value</option>
</select>
</form>

和

var arr = [
{V:'alpha',T:'One'},
{V:'bravo',T:'Two'},
{V:'charlie',T:'Three'}
];
$(function() {
        $( '.tsc' ).mousedown(function() {
                var sel = $(this);
                sel.unbind('mousedown');
                $(arr).each(function() {
                        sel.append($('<option>')
                                .attr('value', this.V)
                                .text(this.T));
                });
        });
});

jQuery rock。

如何做延迟选择选项生成

2 个答案: