Formulario Seleccionar campos que tienen un valor seleccionable combinado máximo

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.

Ahora mi pregunta:

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

preguntado el 09 de marzo de 12 a las 17:03

3 Respuestas

Prueba esto:

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


Aquí está el violín: http://jsfiddle.net/ZmBLw/

respondido 11 mar '12, 00:03

Hi this is great! But it doesn't take into account the values for the children are 0-7 and not 1-8 like the adults. It therefore allows you to go up to 9 for some reason in some cases and only 7 in others. I am not sure if links are allowed but here is what I mean : bookingtest.walesdesign.com/index.html . If you select 6 or 7 in the adults field, and then the maximum it will let you in the next, it then allows you to select 1 more than the total allowed - Kevin Smith

Thanks for the fiddle. It does the same on yours. If you select 6 in the adult field, then 2 in the child field, and then go back to adult, you can now select 7 which would then total 9 - Kevin Smith

Perfect! Thank you, I wish I could vote up for you, but it says I need 15+ reputation. Will work on that and come back! - Kevin Smith

@KevinSmith - I hadn't realized that only one of them had a 0 value. I updated the code to account for that. - José Silber

@KevinSmith - Every time you use a jQuery selector, jQuery has to go out and query the DOM for your elements. This is among the most expensive operations you could do in your code (some selectors are worse than others - with the ID selector being the most efficient - but the point still stands). Caching your selectors ensures that you only query the DOM once, which will result in much better performance (see what happened to Twitter when they didn't). - José Silber

Try something like this for your adults select. The code for children should be almost identical, swap adults and children identifiers.

$('#adults').change(function(){
    var chosen = $('#adults option:selected').val();
    var maxOther = 8 - chosen;
    for(var i = 0; i<=maxOther; i++){
        $('#children option[value="' + i + '"]').removeAttr("disabled");
    }
    for(var i = maxOther+1; i <= 8; i++){
        $('#children option[value="' + i + '"]').attr("disabled","disabled");
    }
});

respondido 09 mar '12, 17:03

Algo como esto debería funcionar:

$(document).ready(function() {
  maxTotal = 8;
  $('#adults').change(function () {
     var numChildren = $('#children option:selected').val();
     var maxChildren = maxTotal - numChildren + 1;
     $('#children option').each(function () {
       $(this).attr("disabled","");
     }
     for(var i = maxChildren; i <= maxTotal; i++){
       $('#children option[value="' + i + '"]').attr("disabled","disabled");
     }
  });
  $('#children').change(function () {
     var numAdults = $('#adults option:selected').val();
     var maxAdults = maxTotal - numAdults + 1;
     $('#adults option').each(function () {
       $(this).attr("disabled","");
     }
     for(var i = maxAdults; i <= maxTotal; i++){
       $('#adults option[value="' + i + '"]').attr("disabled","disabled");
     }
  });
});

respondido 09 mar '12, 17:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.