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, 2nd drop-down value should be greater than the 100, if it is 200 in 1st, value of 2nd should be greater than 200

Any idea in jQuery or js?

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, 2nd drop-down value should be greater than the 100, if it is 200 in 1st, value of 2nd should be greater than 200

Any idea in jQuery or js?

• php
• javascript
• jquery
• html
• ajax

• Hi Ricky i don't know how to do this, please guide me. – iLaYa ツ Commented Aug 2, 2012 at 12:34
• 1 I asked that because it is considered a good practice to show that you have tried something before you ask for help otherwise it just sounds as if you are asking for someone to do your homework... But since this is such a popular question I guess you have 5 implementations already =) pick one ;) – ricardoespsanto Commented Aug 2, 2012 at 12:39

5 Answers 5

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'>
<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/NjLNF/2/

EDIt - added parseInt() as per ment

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

$('#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.

$(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);
        });
    });

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