从属下拉列表按第一个下拉列表中选择的递增顺序工作正常，但按降序失败

Question

我是Jquery的新手。我编写了一个依赖下拉列表，我从第一个下拉列表中选择一个值，所有大于第一个下拉列表的值都显示在第二个下拉列表中。
当我在第一个下拉列表中选择一个值时，将调用以下函数：

<script>    
function cost_change(price) {
    var value = price;
    console.log("value",value);      
    var toKeep = jQuery('#SearchForm_max_cost_select option').filter( function( ) {
        return parseInt(this.value) > parseInt( value);       
 } );        
   console.log("to keep",toKeep);
   jQuery('#SearchForm_max_cost_select').html(toKeep);
}
</script>  

现在，该功能工作正常，但问题是，我第一次从第一个下拉列表中选择了 3，然后在第二个下拉列表中显示了值 [4,5,6]。之后，我从第一个下拉列表中选择了 2，然后在第二个下拉列表中显示值 [4,5,6] 而不是 [3,4,5,6]。当我在第一个下拉列表中按递增顺序选择数字时显示的值工作正常。但是当我将第一个下拉列表中的值减少到小于先前选择的值时，没有变化。

是缓存问题还是必须修改上述功能。

编辑：传递给函数的可变价格cost_change是在第一个下拉列表中选择的值，工作正常

.HTML：

<td width="250" bgcolor="#F1F5F6">
                        <select id="SearchForm_min_cost_select" style="display: none;">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><input type="text" id="SearchForm_min_cost" name="SearchForm[min_cost]" style="width:70px" placeholder="Min Cost" class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"><button type="button" tabindex="-1" title="Show All Items" id="btn" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text">&nbsp;</span></button>        <select id="SearchForm_max_cost_select" style="display: none;">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><input type="text" id="SearchForm_max_cost" name="SearchForm[max_cost]" style="width:70px" placeholder="Max Cost" class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"><button type="button" tabindex="-1" title="Show All Items" id="btn" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text">&nbsp;</span></button>                            </td>

Answer 1

您的主要问题是"当您第一次过滤第二个下拉列表中的选项时会重新绘制，因此当您尝试再次执行此操作时，没有更多选项可以匹配条件"。

在对第二个下拉列表进行过滤时，您需要重新绑定第二个下拉列表

$('#SearchForm_max_cost_select').html($('#SearchForm_min_cost_select').html())

看看这里，它会为你工作

function cost_change(price) {
    var value = price;
    console.log("value",value);     
    $('#SearchForm_max_cost_select').html($('#SearchForm_min_cost_select').html());
    var toKeep = jQuery('#SearchForm_max_cost_select option').filter( function( ) {
        return parseInt(this.value) > parseInt( value);       
 } );        
   console.log("to keep",toKeep);
   jQuery('#SearchForm_max_cost_select').html(toKeep);
}

这是小提琴