如何更改基于第一个下拉选择的第二个下拉值？答案

【问题标题】：How to change second drop-down value based first drop-down selection?如何更改基于第一个下拉选择的第二个下拉值？
【发布时间】：2012-08-02 12:28:43
【问题描述】：

我有两个下拉列表，即Min Price 和Max Price，我想根据第一个选择更改第二个下拉值。

举例1st drop-down selection is 100 means, 2nd drop-down value should be greater than the 100, if it is 200 in 1st, value of 2nd should be greater than 200

有关于 jQuery 或 js 的想法吗？

【问题讨论】：

嗨，Ricky，我不知道该怎么做，请指导我。
我之所以这么问，是因为在寻求帮助之前表明您已经尝试过某些事情被认为是一种很好的做法，否则听起来好像您是在要求某人做功课...但是因为这是一个非常受欢迎的问题，我猜你已经有 5 个实现了 =) 选择一个；)

标签： php javascript jquery html ajax

【解决方案1】：

我能想到的最简单的（这使您可以重新选择，您可以选择 400，然后选择 200，一切正常）

<select id='min'>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='300'>300</option>
<option value='400'>400</option>
</select>
<select id='max'>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='300'>300</option>
<option value='400'>400</option>
</select>

var removed;

$('#min').change( function() {
    var value = this.value;
    $('#max').prepend(removed);
    var toKeep = $('#max option').filter( function( ) {
        return parseInt(this.value, 10) >= parseInt( value, 10);
    } );
    removed =  $('#max option').filter( function( ) {
        return parseInt(this.value, 10) < parseInt( value, 10);
    } );
    $('#max').html(toKeep);
});

http://jsfiddle.net/NjLNF/2/

编辑 - 根据评论添加 parseInt()

【讨论】：

嗨，它可以正常工作到 100 到 900，之后（1000,2000，..）它不能正常工作检查这个http://jsfiddle.net/NjLNF/1/
@LearneR 是的，你是对的，因为你需要 parseInt() 值jsfiddle.net/NjLNF/2

【解决方案2】：

您可以使用 jquery 和更改功能。如果您的第一个下拉列表的 id 是 drop1，那么它将是 $("#drop1").change(function() { .. 将您的函数放在这里以填充第二个下拉列表..

【讨论】：

【解决方案3】：

$('#first_dd').change(function(){
var dd_val=$(this).val();
var options = "";
$('#second_dd').html('');
for(var i=parseInt(dd_val+1);i<=END-LIMIT;i++)
{
$('#second_dd').append('<option value='+i+'>'+i+'</option>');
}
});

我没有在浏览器中测试它。考虑系统，遵循逻辑。

【讨论】：

是的，但是如果用户为第一个下拉菜单选择了一个较高的值，然后改变主意并想要一个较低的值怎么办？

【解决方案4】：

$(function () {
        $("#one").change(function (e) {
            $("#two").empty();

            var options =
            $("#one option").filter(function(e){
                return $(this).attr("value") > $("#one option:selected").val();
            }).clone();

            $("#two").append(options);
        });
    });

【讨论】：

如果你想返回？我的意思是如果你先在第一个下拉菜单中选择 4，然后再选择一个？
脚本不会改变（影响）#one 下拉列表的值，只是将大于#one 的值克隆到#two

【解决方案5】：

将侦听器添加到 Min Price 下拉列表，然后遍历 Max Price 下拉列表的值，直到找到大于所选 Min Price 下拉列表的值。像这样的

$('#minPrice').change(function(){
    var minVal = $('#minPrice option:selected').val();
     $('#maxPrice option').each(function(){
          if(minVal < $(this).val()){
             $(this).attr('selected', 'selected');
             return false;
          }
     });
});

【讨论】：