如何禁用下拉选项小于一些值使用jquery

how to disable dropdown options less than some value using jquery

本文关键字：jquery 小于 何禁用 选项      更新时间：2023-09-26

下面我有一个年份下拉列表。

<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，但无济于事。

我做错了什么吗?欢迎任何帮助/建议

您可以使用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>

- Update -

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

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

Rory的回答很好(我为它投了赞成票:))，但这里有一个更像是你最初尝试的改编:

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

关键的区别在于，jQuery的:lt()在它的选择器组中运行元素索引，而不是它的值。因此，您必须检索"2016"<option>的索引，然后才能将其他索引与:lt()进行比较。

注意:这也会禁用"选择年份"选项，这可能会也可能不会给你带来问题。

相关文章：