javascript - 两个选择选项上的 onChange 事件

Question

当 dropdown1 更改时，是否可以更改 dropdown2 的值的限制？这是我的代码

<!--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 更改为nonedropdown2 选项时只会显示none而不会显示其他。而且我还想要的是，如果我将 dropdown1 的值更改为一个数量，例如30000， dropdown2 将仅显示大于30000包含 option的值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);   
           }
        }            
    });
});

未经测试，但这应该有效。我有点啰嗦。