Question

我以前使用以下HTML代码作为下拉列表：

<select id="customDropDown" name="mydropdown">
  <option value="CourseIDFilter"id ="1" class ="choosefilter" >Course ID  </option>
  <option value="CourseNameFilter"  id ="2" class ="choosefilter">Course Name</option>
  <option value="ExpiryDateFilter"  id ="3" class ="choosefilter">Expiration Date</option>
  <option value="AuthorFilter" id ="4" class ="choosefilter">Author</option>
</select>

由此我使用以下JavaScript来处理下拉列表中的选择：

$(document).ready(function () {
  $('.choosefilter').click(function (event) {
    var id = event.target.id
    var fullPath = '@HttpContext.Current.Request.Url.Scheme://@HttpContext.Current.Request.Url.Host' + '@HttpContext.Current.Request.ApplicationPath';
    var urlstring = 'Profile/ActiveCoursesList/' + id;
    var path = fullPath.concat(urlstring);

    $.get(urlstring, function (data) {
      $('#ActiveCourses').html(data);
    });

    event.cancelBubble = true;
    event.returnValue = false;
    event.preventDefault();
    event.stopPropagation();

  });
});

由于select的设计有一些变化，HTML现在如下：

<form class="custom">
  <label for="customDropdown">You can filter your courses below:</label>
  <select style="display:none;" id="customDropdown">
    <option value="CourseIDFilter"id ="1" class ="choosefilter" >Course ID  </option>
    <option value="CourseNameFilter"  id ="2" class ="choosefilter">Course Name</option>
    <option value="ExpiryDateFilter"  id ="3" class ="choosefilter">Expiration Date</option>
    <option value="AuthorFilter" id ="4" class ="choosefilter">Author</option>  
  </select>

  <div class="custom dropdown open" style="width: 192px;">
    <a href="#" class="current">Order by:</a>
    <a href="#" class="selector"></a>
    <ul style="width: 190px;">
      <li class="selected">Course ID</li>
      <li>Course Name</li>
      <li>Expiration Date</li>
      <li>Author</li>
    </ul>
  </div>
</form>

关于为什么我的jQuery不再解雇的任何想法？

Answer 1

在新版本中，您的选择实际上是隐藏的，因为 style =“display：none;”。因此，如果您没有在某处显示它并尝试单击 li 元素将不会导致任何结果。所以，我想你应该使用：

$('.dropdown li').on('click', ...

此外，当您使用dropdown元素时，您应该将侦听器附加到选择标记的更改事件，而不是单击事件选项。

$('#customDropdown').on('change', function() {
   var id = $(this).find(":selected").attr("id");
})

Answer 2

尝试使用

$('#customDropdown').on('change', function(event){ ... }

而不是

$('.choosefilter').click(function(event) { ... }

Answer 3

我在第二个customDropdown与customDropDown

中看到您的ID不同

选择列表不会在选择时触发jquery

3 个答案: