如何做延遲選擇選項生成

我有一些網頁，其中顯示了一些（多達幾十）的工作項目。每個工作項目都是一個由多個字段組成的表單，其中兩個是大型選擇（一個大約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

如何做延遲選擇選項生成

回答

相關問題