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

重新下载内容而不是下拉列表

1 个答案: