CODEWITHSUNDEEP
javascriptjqueryhtml
Jay
Jay

Reputation: 3082

Select list not firing jquery on selection

I was previously using the following HTML code for a dropdownlist:

<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>

From this I was using the following JavaScript to deal with the selection from the dropdown:

$(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();

  });
});

Due to some changes in the design of the select the HTML is now as follows:

<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>

Any ideas as to why my jQuery is no longer firing?

Upvotes: 0

Views: 110

Answers (3)

Krasimir
Krasimir

Reputation: 13529

In the new variant your select is actually hidden, because of style="display:none;". So, if you don't show it somewhere and try to click on the li element will not lead to any results. So, I guess that you should use:

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

Also, when you use dropdown element you should attach a listener to the change event of the select tag, not click event of its options.

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

Upvotes: 2

Jon Harding
Jon Harding

Reputation: 4946

I see your IDs are different in the second one customDropdown vs customDropDown

Upvotes: 0

putvande
putvande

Reputation: 15213

Try using 

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

instead of 

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

Upvotes: 1

Related Questions