如何使用jquery禁用小于某个值的下拉选项

Question

Below I have a year dropdown.

<select name="from_year" class="col-md-4 form-control" id="from_year">
    <option value="0">Select Year</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option selected="selected" value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
</select>

Now from ajax call I get some year say 2016. Now I want to disable all options less than 2016. I tried following:

$('select#from_year option:lt('+payment_date[1]+')').prop("disabled", true);

. . . where payment_date[1] = 2016 , but to no avail.

Am I doing something wrong. Any help/suggestions are welcome.

Answer 1

You can use filter() to achieve this:

 var year = 2016; $('#from_year option').filter(function() { return $(this).val() < year; }).prop('disabled', true);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select name="from_year" class="col-md-4 form-control" id="from_year"> <option value="0">Select Year</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option selected="selected" value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> </select>

- Update -

Note that the syntax for the filter() function can now be simplified using ES6 arrow functions:

$('#from_year option').filter((i, el) => el.value < year).prop('disabled', true);

Answer 2

Rory's answer is great (I upvoted it :) ), but here is one that is more of an adaptation of what you initially tried:

var $group = $("select#from_year");
var iTarget = $group.find("[value='" + payment_date[1] + "']").index();
$group.find(":lt(" + iTarget + ")").prop("disabled", true);

The key difference is that jQuery's :lt() runs off of an elements index within its selector group, rather than its value. So you have to retrieve the index of the "2016" <option> before you can compare the other indexes to it with :lt() .

Note: That would also disable the "Select Year" option which may or may not cause you issues.