php - 具有最大组合可选值的表单选择字段

Question

您好 stackoverflow 大师!这是我使用该网站一段时间后的第一篇文章。我通常的专业领域是 PHP 和 MySQL，所以当我有空闲时间时，我会开始在这些领域做出贡献。

现在我的问题:

我有一个正在为预订系统构建的表单。

其中一个字段是一个选择字段，用于确定有多少成人和 child 被预订。这是两个单独的下拉选择字段，带有多个选项。

预订脚本的规则是最多 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 个 child ，那么成人值 4-8 将被消隐，或者如果他们首先选择 3 个成人， child 值 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();​

请记住始终缓存您的选择器!!

---

这是 fiddle :http://jsfiddle.net/ZmBLw/