How To Change Second Drop-down Value Based First Drop-down Selection?

I have a two drop downs namely Min Price and Max Price, i want to change the second drop-down value based on the first selection. Say example 1st drop-down selection is 100 means,

Solution 1:

Simplest i could think of ( this allows you to go back in your choices, you can select 400 and then 200 and everything works )

<select id='min'>
<optionvalue='100'>100</option><optionvalue='200'>200</option><optionvalue='300'>300</option><optionvalue='400'>400</option>
</select>
<selectid='max'><optionvalue='100'>100</option><optionvalue='200'>200</option><optionvalue='300'>300</option><optionvalue='400'>400</option></select>​

var removed;

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

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

EDIt - added parseInt() as per comment

Solution 2:

You can use jquery and the change function. If you id for the first dropdown is drop1 the it would be $("#drop1").change(function() { .. put your function here to populate the second drop down ..

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

I have not test it in browser. Consider the systex, just follow the logic.

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

Solution 5:

Add a listener to Min Price drop down then loop through the values of Max Price drop down till you find a value greater than the selected Min Price dropdown. Something like this

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