recharger le contenu ne forme pas pour les listes déroulantes

Question

J'utilise un script pour générer des listes déroulantes de style personnalisé sur mes sélections. Fondamentalement, il crée une liste sur les sélections et cache la sélection originale, ce qui rend beaucoup plus facile à coiffer qu'un <select> permet.

Ainsi, la configuration de base est comme ce

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

contenu de la forme

Je veux la section wrap à générer sans rafraîchir la font partie de cette façon les dropdodwns DonT continuent de disparaître et réapparaître lorsque la page se charge.

voici mon code pour créer des listes déroulantes (suggestions d'optimisation des performances sont les bienvenus :))

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

et est le code ici pour sélectionner une option et submiting la forme

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

Vous modifiez beaucoup le DOM avec ce code. Si c'est lent, essayez d'abord de laisser tomber autant de modifications DOM que possible dans une chaîne, puis insérez-la. Vous faites également des sélections répétées dans certains endroits. Exemple:

$("#" + 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>'); 

pourrait changer à:

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