Javascript 为下拉列表重新加载内容而不是表单

我正在使用脚本从我的选择中生成自定义样式的下拉列表。基本上，它从选择中创建一个列表，并隐藏原始选择，从而使样式设置比默认设置容易得多

所以基本的设置是这样的

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

从形式到内容 我希望在不刷新表单部分的情况下生成包装部分，这样当页面加载时，DropDoWns不会一直消失和重新出现

以下是我创建下拉列表的代码，欢迎提供任何性能调整建议：

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++; 
                        }); 
                      }

下面是选择选项和提交表单的代码

$(".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();
                        }); 

---

使用这段代码，您正在大量修改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); 

---

我能做些什么来加快这个表格的速度，或者我应该只考虑自己的表格，这会让我倒退两周。