两个选择选项上的onChange事件

Question

is it possible to change the limit the value of the dropdown2 when the dropdown1 changes? here is my code

<!--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>

I want is when I change dropdown1 to none the dropdown2 option will only show none and no other more. And I also want is if I change the value of dropdown1 to an amount, for example 30000 , dropdown2 will show only the values that are greater that 30000 including the option any . Is there a way to do this in javascript or jQuery? sorry. I'm new at javascript and jQuery.. Thank you in advance!

Answer 1

Demo : http://jsfiddle.net/LsaLA/1/

Code :

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

try this: 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);   
           }
        }            
    });
});

Untested, but this should work. I'm a bit verbose.