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

Question

Привет, stackoverflow гуру! Это мой первый пост после того, как мы использовали сайт на ярмарке. Моя нормальная компетенция находится в 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.

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

Kevin

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