将带有 onchange 的选择转换为 ul 和 jquery

Question

我正在尝试将我的选择框转换为更时尚的 ul 下拉列表，但选择使用 onchange 调用其中包含 document.search.submit() 的函数

我认为这对我的目的来说是一个不错的选择，因为我认为我可以隐藏真正的选择，下拉菜单也会更改该值并提交表单，但这不起作用。我该怎么做才能将这些值提交到 url 参数中。

注意选择中的选项是在python中动态生成的

    $(document).ready(function() { 
  createDropDown(); 

  $(".dropdown dt a").click(function(event) { 
    event.preventDefault(); 
    var dropID = $(this).closest("dl").attr("id"); 
    $("#" + dropID).find("ul").toggle(); 
  }); 

  $(document).bind('click', function(e) { 
    var $clicked = $(e.target); 
    if (! $clicked.parents().hasClass("dropdown")) 
      $(".dropdown dd ul").hide(); 
  }); 


  $(".dropdown dd ul a").click(function() { 
    var dl = $(this).closest("dl"); 
    var dropID = dl.attr("id"); 
    var text = $(this).html(); 
    var source = dl.prev(); 
    $("#" + dropID + " dt a").html(text); 
    $("#" + dropID + " dd ul").hide(); 
    source.val($(this).find("span.value").html()) 
  }); 
}); 

function createDropDown() { 
  var selects = $("select.dropdown_value"); 
  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>'); 
    $("#" + dropID).append('<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>'); 
    $("#" + dropID).append('<dd><ul></ul></dd>'); 
    options.each(function() { 
      $("#" + dropID + " dd ul").append('<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>'); 
    }); 
    idCounter++; 
  }); 
}

Answer 1

已修复，只是在click函数底部添加了document.search.submit()函数，欢迎对此代码进行任何优化，谢谢