CODEWITHSUNDEEP
jquery
Chris Cummings
Chris Cummings

Reputation: 1548

How to use jQuery to modify dropdown list

I'm still learning my way around jQuery but I think this may be pretty simple:

I have 2 dropdown boxes with name and id of: topnumber, bottomnumber

Both lists contain the numbers 1-5.

What I'd like to do is use jQuery to disable or remove from bottomnumber any number GREATER than what they picked in top number (equal is OK). For example if they pick 3 in topnumber then 4 and 5 would be removed or disabled from the bottomnumber list.

Any help is appreciated. Thanks! Chris

Upvotes: 1

Views: 494

Answers (6)

expertCode
expertCode

Reputation: 533

$(document).ready(function () {
    $('select[id="topnumber"]').change(function () {
        var maxValue = parseInt($('select[id="topnumber"]').attr('value'));
        $(' select[id="bottomnumber"] option').attr('disabled', false).filter(function() {
            return parseInt($(this).attr('value')) > maxValue ;
        }).attr('disabled', true);
    });
});

See example here: http://jsfiddle.net/XLUju/

Upvotes: 0

Mark Olson
Mark Olson

Reputation: 61

Using a :gt selector lets you do this fairly easily. Working example

$("#topnumber").change(function(e) {
   // turn the value of #topnumber in a javascript integer
   var num = parseInt($(this).val());
   // :gt is zero-indexed, which means that :gt(0) will get 2,3,4,5
   // and 1 would get 3,4,5 etc, etc.., so subtract one.
   num = num - 1 
   // reset the list so that everything is active.
   $("#bottomnumber option").removeAttr('disabled');
   // disable the ones which are higher than topnumber's value
   $("#bottomnumber option:gt("+num+")").attr('disabled', 'disabled');
});

Upvotes: 0

Sahil Muthoo
Sahil Muthoo

Reputation: 12519

Working Example

$('#topNumber').change(function() {
    var num = $(this).val();
    $('#bottomNumber option').removeAttr('disabled').filter(function() {
        return Number($(this).attr('value')) >= num;
    }).attr('disabled', 'disabled');
});

This code uses filter() to reduce the matched set of options to the ones which are greater than val and then disables all options in the matched set.

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

Working demo

$(function(){
  $('#topnumber').change(function() {
     var topValue = parseInt(this.value);

     $('#bottomnumber option').attr("disabled", false).filter(function(){
        //This will make sure to select only options with value > topValue
        return (topValue < parseInt(this.value)); 
     }).attr("disabled", true);
   });
});

Upvotes: 2

Gabe
Gabe

Reputation: 50493

Here is a live example.

$(document).ready(function(){
   buildBottomOptions();
});

$('#top').change(function() {
    buildBottomOptions();
});


function buildBottomOptions() {
    var value = $('#top').val();
    var options = '';

    for (i = 1; i <= value; i++)
       options += '<option value="' + i + '">' + i + '</option>';

    $('#bottom').find('option').remove().end().append(options);
}

Upvotes: 0

Timbo
Timbo

Reputation: 4533

You need to bind to the change event of each of your drop down lists, and alter the values of the other according to what a user enters.

To do this use jQuery's .change, e.g.

$("#bottomnumber").change(function() { 
$(this).val() - this will be the selected value
$("#topnumber")...do stuff to the top number one
});

And vice versa.

Hope that helps...not the complete code but should set you off in the right direction.

Upvotes: 0

Related Questions