你好，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
试试这个：
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/
为您的成年人选择这样的东西。儿童的代码应该几乎相同，交换成人和儿童的标识符。
$('#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");
}
});
这样的东西应该可以工作：
$(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");
}
});
});