리로드 콘텐츠가 드롭 다운 형식이 아닙니다.

Question

스크립트를 사용하여 선택 항목에서 맞춤 스타일 드롭 다운을 생성하고 있습니다. 기본적으로 선택 항목에서 목록을 만들고 원래 선택 항목을 숨겨서 <select>보다 스타일을 훨씬 쉽게 만듭니다.

그래서 기본 설정은

내가 랩 부분은 양식있는 부품 dropdodwns가 사라지고 유지 해달라고 그런 식으로 새로 고치지 않고 생성 할 형식으로부터이

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

내용처럼이며, 페이지가로드 될 때 다시 나타납니다. 여기

는

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 변경을 문자열에 삽입 한 다음 삽입하십시오. 당신은 또한 어떤 장소에서 반복 선택을하고 있습니다. 예 :

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