Question

Hello stackoverflow guru’s! This is my first post after having used the site for a fair while now. My normal realm of expertise is within PHP and MySQL so when I have free time I will start to contribute in those areas.

Now my question:

I have a form I am building for a booking system.

One of the fields is a select field to ascertain how many adults and children are being booked for. The are two separate dropdown select fields with several options.

The rules of the booking script are that a maximum of 8 people can stay with a minimum of 1 adult.

Obviously I could put a condition in the processing PHP file, but thats not very good for the user experience so we want to have it that when a number of people is selected from either dropdown, it fades out any value in the other that would take the total over 8.

The HTML would be like this:

<select id="adults">
  <option value="1">1</option>
  <option selected="selected" value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

<select id="children">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

What I am having significant issues with is the jQuery code I will need to fade out the irrelevant options, as it needs to work both ways ie. if they select 5 children first, then adult values 4-8 are then blanked out, or if they select 3 adults first, children values 6 and 7 would blank out.

I would post what I have tried so far with jQuery, but I now know it is completely the wrong code as I was going in the direction of using jQuery calculate.

Any ideas? (Many many thanks and appreciation in advance, I am sorry that I cant provide any more info).

Kevin

Answer 1

Try this:

var cache = {
    $adults:            $('#adults'),
    $children:          $('#children')
}
cache.$adultsOptions    = cache.$adults.find('option');
cache.$childrenOptions  = cache.$children.find('option');

cache.$adults.add(cache.$children).change(function()
{
    var $this    = $(this),
        other    = $this.is( cache.$adults ) ? '$children' : '$adults',
        max      = 8 - $this.val();

    cache[other + 'Options'].each(function()
    {
        $.prop( this, 'disabled', $.attr(this, 'value') > max );
    });
});

cache.$adults.change();​

Remember to always cache your selectors!!

---

Here’s the fiddle: http://jsfiddle.net/ZmBLw/