0

我是 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>
4

1 回答 1

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);
}

这是小提琴

于 2013-11-14T05:55:59.693 回答