Форма Выберите поля, которые имеют максимальное комбинированное выбираемое значение

Question

Привет, гуру стека и переполнения! Это мой первый пост после того, как я воспользовался этим сайтом. Моя обычная область компетенции - в PHP и MySQL, поэтому, когда у меня будет свободное время, я начну вносить свой вклад в эти области.

Теперь мой вопрос:

У меня есть форма, которую я строю для системы бронирования.

Одно из полей является полем выбора, чтобы определить, на сколько забронированы взрослые и дети. Это два отдельных выпадающих поля выбора с несколькими параметрами.

Правила сценария бронирования таковы, что максимум 8 человек могут проживать с минимум 1 взрослым.

Очевидно, я мог бы поместить условие в обрабатывающий PHP-файл, но это не очень хорошо для пользовательского опыта, поэтому мы хотим, чтобы при выборе нескольких людей из одного выпадающего списка оно затухало в любом другом это заняло бы в общей сложности более 8.

HTML будет выглядеть так:

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

У меня возникли существенные проблемы с кодом jQuery, который мне понадобится, чтобы скрыть несущественные параметры, поскольку он должен работать в обоих направлениях, т.е. если они сначала выбирают 5 детей, то значения 4-8 для взрослых затем отбрасываются, или если сначала выбираются 3 взрослых, значения 6 и 7 для детей пропадают.

Я бы опубликовал то, что я до сих пор пробовал с jQuery, но теперь я знаю, что это совершенно неправильный код, поскольку я шел в направлении использования вычисления jQuery.

Есть идеи? (Большое спасибо и благодарность заранее, мне жаль, что я не могу предоставить больше информации).

Кевин

Answer 1

Попробуйте это:

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();​

Не забывайте всегда кэшировать ваши селекторы !!

---

Вот скрипка: http://jsfiddle.net/ZmBLw/

Answer 2

Попробуйте что-нибудь подобное для своих взрослых. Код для детей должен быть практически одинаковым, поменяйте местами идентификаторы для взрослых и детей.

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

Answer 3

Примерно так должно работать:

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