0

我以前使用以下 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 不再触发的任何想法？

4

3 回答 3

2

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

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

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

$('#customDropdown').on('change', function() {
   var id = $(this).find(":selected").attr("id");
})
于 2013-09-04T20:20:45.347 回答
1

尝试使用

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

代替

$('.choosefilter').click(function(event) { ... }
于 2013-09-04T20:15:28.893 回答
0

我看到您的 ID 在第二个中customDropdown与customDropDown

于 2013-09-04T20:16:12.910 回答