Question

我有两个选择字段。最小分数和最大分数。范围是5000到50000，我想要的是在maxpoint选择框中我想要显示大于最小点选择值的值。

例如，如果我从minpoint选择字段中选择15000，那么在我的maxpoint选择框中我想隐藏/禁用前两个选项（5000和10000），因为它们小于15000。

根据最小点启用和禁用最大点。

HTML看起来像这样

<select class="pointSelect" tabindex="2" id="minPoints" name="minPoints">
<option value="0" selected="selected">Min</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
<option value="15000">15000</option>
<option value="20000">20000</option>
<option value="25000">25000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
</select>
<select class="pointSelect" tabindex="3" id="maxPoints" name="maxPoints">
<option value="50000" selected="selected">Max</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
<option value="15000">15000</option>
<option value="20000">20000</option>
<option value="25000">25000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
</select>

我正在尝试这样的事情，但尚未达到标记

    $('#minPoints').change(function(){
    var index = $(this).find('option:selected').index();
    $('maxPoints').find('option').lt(index).attr('disabled','disabled');
    $('maxPoints').find('option').gt(index).removeAttr('disabled');
    });

有人可以指导吗？

Answer 1

您可以根据索引选择性地显示和隐藏选项：

$('#minPoints').change(function () {
    var index = $(this).find('option:selected').index();
    $('#maxPoints').find('option:lt(' + index + ')').hide();
    $('#maxPoints').find('option:gt(' + index + ')').show();
});

$('#maxPoints').change(function () {
    var index = $(this).find('option:selected').index();
    $('#minPoints').find('option:gt(' + index + ')').hide();
    $('#minPoints').find('option:lt(' + index + ')').show();
});

jsfiddle

Answer 2

您宁愿以这种方式使用lt或gt -

$("#maxPoints").find("option:lt("+index+")").attr("disabled","disabled");
$("#maxPoints").find("option:gt("+index+")").removeAttr("disabled");

工作小提琴：here

选择中启用禁用选项

2 个答案: