重新加載內容不是形式的下拉列表

Question

我正在使用腳本來生成我的選擇自定義樣式的下拉列表。基本上它會創建一個列表，並隱藏原始選擇，使其更容易風格化，比<select>允許的風格更容易。

所以基本設置是這樣的形式，這

<div id="formdiv"> 
    <form method="get" name="search" action="samepage"> 
    inputs 
    </form> 

內容

我想不刷新組成部分這樣的dropdodwns不不斷消失要生成的重疊部和在頁面加載時重新出現。

這裏是我創建的下拉菜單代碼（任何性能調整建議，歡迎:)）

function createDropDown() { 
         var selects = $("select.createdrop"); 
         var idCounter = 1; 
         selects.each(function() { 
          var dropID = "dropdown_" + idCounter; 
          var source = $(this); 
          var selected = source.find("option[selected]"); 
          var options = $("option", source); 
          source.after('<dl id="' + dropID + '" class="dropdown"></dl>'); 
          var imgtype = '<img src="images/transpx.gif" class="srcimg '+selected.text().toLowerCase()+'" />' 
          $("#" + dropID).append('<dt><a href="#">'+imgtype + selected.text() + '<span class="value">' + selected.val() + '</span><img src="images/select-down-arrow.png" class="down-arrow" /></a></dt>'); 
          $("#" + dropID).append('<dd><ul></ul></dd>'); 
          options.each(function() { 
          $imgclasstxt = $(this).text().toLowerCase(); 
          var srcimg = '<img src="images/transpx.gif" class="srcimg '+$imgclasstxt+'" width="10px"/>'; 
          $("#" + dropID + " dd ul").append('<li><a href="#" id="'+$(this).text()+'">'+srcimg + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>'); 
          }); 
          idCounter++; 
         }); 
         } 

，這裏是選擇一個選項，submiting形式

$(".dropdown dd ul a").click(function() { 
          var dl = $(this).closest("dl"); 
          var dropID = dl.attr("id"); 
          var text = $(this).attr("id"); 
          var source = dl.prev(); 
          var typeicon = '<img src="images/transpx.gif" class="srcimg '+text.toLowerCase()+'" />' 
          $("#" + dropID + " dt a").html(typeicon+''+text+'<img src="images/select-down-arrow.png" class="down-arrow" />'); 
          $("#" + dropID + " dd ul").hide(); 
          var value = $(this).children("span.value").html(); 
          source.val(value); 
          $(this).addClass('selected'); 
          $('body').css('cursor','wait'); 
          document.search.submit(); 
         }); 

Answer 1

你的代碼用這段代碼修改DOM很多。如果速度很慢，請嘗試將盡可能多的DOM更改放入字符串中，然後插入它。你也在某些地方重複選擇。例如：

$("#" + dropID).append('<dt><a href="#">'+imgtype + selected.text() + '<span class="value">' + selected.val() + '</span><img src="images/select-down-arrow.png" class="down-arrow" /></a></dt>'); 
    $("#" + dropID).append('<dd><ul></ul></dd>'); 

可以改變爲：

var html = '<dt><a href="#">'+imgtype + selected.text() + '<span class="value">' + selected.val() + '</span><img src="images/select-down-arrow.png" class="down-arrow" /></a></dt><dd><ul></ul></dd>' 
$("#" + dropID).append(html);