javascript - jQuery 在选择菜单中设置特定数字

Question

我正在这个网站上工作http://offline.raileisure.com/

右侧有一些预订选项。

如果上面写着成人人数和 child 人数，我需要将每个特性的人数限制为 x。

即如果选择站长之家，则最多可容纳 8 人。

因此，如果选择了 5 名成人，我需要 child 选择菜单来仅显示 5-8 之间的差异(如果有意义的话)。

否则有人可以预订 5 名 child 和 5 名成人...这将超过最多 8 名...

与选择车厢相同，最多可容纳 4 人

谢谢

李

Answer 1

看一下 jquery 更改事件

http://api.jquery.com/change/

您可以使用此事件来编辑其他输入，并且仅使剩余的选项可用。

这里的代码完全符合您的要求:

var max = 8;

for (var i = 0; i <= max; i++) {
    $("#children, #adults").append($("<option></option>").attr("value", i).text(i));
}

$("#adults").change(function() {
    var sel = $("#children").val();
    $("#children").html("");
    for (var i = 0; i <= max - parseInt($("#adults").val()); i++) {
        $("#children").append($("<option></option>").attr("value", i).text(i));
    }
    $("#children").val(sel);
});

$("#children").change(function() {    
    var sel= $("#adults").val();
    $("#adults").html("");
    for (var i = 0; i <= max - parseInt($("#children").val()); i++) {
        $("#adults").append($("<option></option>").attr("value", i).text(i));
    }    
    $("#adults").val(sel);
});

工作示例:http://jsfiddle.net/geertvdc/ADC3a/