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

修复它刚刚将document.search.submit（）函数添加到click函数的底部，欢迎任何对此代码的优化仍然谢谢

将onchange选择转换为ul和jquery

1 个答案: