两个选择选项上的onChange事件

Question

当dropdown1更改时，是否可以更改dropdown2的limit值？以下是我的代码

<!--DROPDOWN 1-->
<p class="">From</p>
<select name="From" id="From" onChange="displayVal(this)">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">&pound;10,000</option>
<option value="20000">&pound;20,000</option>
<option value="30000">&pound;30,000</option>
<option value="40000">&pound;40,000</option>
<option value="50000">&pound;50,000</option>
<option value="60000">&pound;60,000</option>
<option value="70000">&pound;70,000</option>
<option value="80000">&pound;80,000</option>
<option value="90000">&pound;90,000</option>
<option value="100000">&pound;100,000</option>
<option value="110000">&pound;110,000</option>
<option value="120000">&pound;120,000</option>
<option value="130000">&pound;130,000</option>
<option value="140000">&pound;140,000</option>
<option value="150000">&pound;150,000</option>
<option value="150001">&pound;150,000+</option>
</select>

<!--DROPDOWN 2-->
<p class="">To</p>
<select name="To" id="To">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">&pound;10,000</option>
<option value="20000">&pound;20,000</option>
<option value="30000">&pound;30,000</option>
<option value="40000">&pound;40,000</option>
<option value="50000">&pound;50,000</option>
<option value="60000">&pound;60,000</option>
<option value="70000">&pound;70,000</option>
<option value="80000">&pound;80,000</option>
<option value="90000">&pound;90,000</option>
<option value="100000">&pound;100,000</option>
<option value="110000">&pound;110,000</option>
<option value="120000">&pound;120,000</option>
<option value="130000">&pound;130,000</option>
<option value="140000">&pound;140,000</option>
<option value="150000">&pound;150,000</option>
<option value="150001">&pound;150,000+</option>
</select>

我想要的是，当我将dropdown1更改为none时，dropdown2选项将只显示none，而不显示其他。我还想要的是，如果我将dropdown1的值更改为某个数量，例如30000，dropdown2将只显示大于30000的值，包括选项any。有没有办法用javascript或jQuery来做到这一点？抱歉的。我是javascript和jQuery的新手。提前谢谢你！

Answer 1

演示：http://jsfiddle.net/LsaLA/1/

代码

function setTo() {
    var f = $('#From').val();
    var t = $('#To');
    t.children().hide();
    if( f == 'none' ) {
        t.children('[value="none"]').show();
        t.val('none');
    }
    else if( t == 'any' ) {
        t.children().show();
        t.val('any');
    }
    else {
        f = parseInt(f, 10);
        t.children().each(function() {
            if( $(this).val() == 'any' ) {
                $(this).show();
                t.val('any');
            }
            else {
                var v = parseInt($(this).val(), 10);
                if(!isNaN(v) && v >= f) {
                    $(this).show();
                }
            }
        });
        t.val('any');
    }
}

$('#From').change(setTo);


//call it on load as well
setTo();

Answer 2

试试这个：http://jsfiddle.net/F6xnL/4/

$("#From").change(function() {
$("#To").attr("disabled", false).children().each(function() {
    $(this).attr('disabled', false);
});

if ($(this).val() === 'any') return;
if ($(this).val() === 'none') {
    $("#To").val("none").attr("disabled", true);
    return;
}

var pound = parseInt($(this).val());
$("#To").children().each(function() {
    var val = $(this).val();
    if (val === 'none' || val === 'any') {
        $(this).attr('disabled', true); return;
    }
    if (parseInt($(this).val()) <= pound) {
        $(this).attr('disabled', true);
    }
});
});​

Answer 3

$('#From').change(function(){
    if($(this).val() == 'none'){
        $('#To').prop('disabled', true);
    }else if((true == $('#To').prop('disabled')) && ($(this).val() != 'none')){
       $('#To').prop('disabled', false);          
    }
    $('#To option').each(function(){
        if($(this).val() < $('#From').val()){
            $(this).hide(0);
        }else{
            if($(this).css('display') == 'none'){
                $(this).show(0);   
           }
        }            
    });
});

未经测试，但这应该可以工作。我有点罗嗦。