如何做延迟选择选项生成

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

该页面加载速度很慢。其中一些可能是由于这些选择的每个副本都有24KB + 52KB的html，我敢打赌，相当多的时间是浏览器构建本质上相同的大部分（大部分是不是兴趣）DOM一遍又一遍。

我在想什么可能会更好是只保留的选项的主副本每个阵列中的和刚开始均选择了只有一个选项（最初选择的值），例如：

<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，选择之间没有真正的相关性（例如，像选择状态限制选择城市的有效选择）。

来源

2014-09-02 John Hascall

除了在屏幕上发布html /数据之外，浏览器还必须进行任何计算/操作吗？ – TimSPQR 2014-09-03 00:05:57

嘛，原来它是不是很难，因为我想象它...

<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的岩石。

来源

2014-09-03 04:09:39

到目前为止，我不会发布代码。我建议重新构建您的概念以获得更简单的结构：

用户一次只能编辑一个项目。只要不采取编辑操作，就不需要生成“几十个表单”。
通过使用jQuery
的呈现的项目，如一个简单的两维阵列的行和字段，以JSON
内置动态在客户项目的表优选打开一个div层，通过使用上面的数组向其中渲染一个表单。当然，只有一组这样的下拉菜单。
考虑通过AJAX请求加载这些下拉列表或使用jQuery ui（如下）中的某些“组合框”功能。在
“保存”提交表单并关闭div层

有一定的容器和对话框随时可以使用jQuery ui来实现这一目标。其结果将是

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

来源

2014-09-03 00:33:33

总的来说，我认为你的方法更好，但我不确定我是否有能力重新设计整个交易。 – 2014-09-03 02:41:45

如何做延迟选择选项生成

回答

相关问题