перезагрузить контент, а не форму для выпадающих

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

и вот код для выбора опции и отправки формы

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