使用 onchange 将选择转换为 ul 和 jquery

Question

我正在尝试将我的选择框转换为更时尚的 ul 下拉菜单，但选择使用 onchange 调用带有 document.search.submit() 的函数，

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

注意 select 中的选项是在 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

修复了它，只是将 document.search.submit() 函数添加到点击函数的底部，欢迎对此代码进行任何优化，仍然谢谢