Question

Hello 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计算的方向发展。

有什么想法吗？（很多人提前感谢和赞赏，很抱歉我无法提供更多信息）。

凯文

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

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

3 个答案: