如何进行延迟选择选项生成

How to do delayed select option generation

本文关键字：选项 选择 何进行 延迟      更新时间：2023-09-26

我有一些网页，其中显示了许多（多达几十个）工作项。每个工作项是由几个字段组成的表单，其中两个字段是大的选择（一个大约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，选择之间没有真正的相关性（例如，选择一个州限制了选择一个城市的有效选择）。

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

  • 用户一次只能编辑一个项目。只要不进行编辑操作，就不需要生成"几十个表单"
  • 将项呈现为具有行和字段的简单二维数组，最好是JSON
  • 使用jQuery在客户端动态构建项目表
  • 如果用户想要编辑一个项，打开一个div层，使用上面的数组将一个表单呈现到其中。当然，只有一组这样的下降
  • 考虑根据AJAX的请求加载这些下拉列表，或者使用一些"组合框"功能，如jQueryui（下面）
  • 在"保存"时提交表单并关闭div层

jQueryui中有一些容器和对话框可以用来实现这一点。结果将是

  • 更通用的代码
  • 减少html开销
  • 更好的可用性

事实证明，这并不像我想象的那么难…

<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摇滚。

相关文章：