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

Question

下面是一年的下拉列表。

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

现在，从 ajax 调用中，我得到了一些年份，比如 2016 年。现在我想禁用 2016 年以下的所有选项。我尝试了以下操作:

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

。 。 。其中 payment_date[1] = 2016，但无济于事。

我是不是做错了什么？欢迎任何帮助/建议。

Answer 1

您可以使用filter()来实现此目的:

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>

- 更新 -

请注意，现在可以使用 ES6 箭头函数来简化 filter() 函数的语法:

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