Question

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

在右边有一些预订的选项..

如果它说的是成人人数和儿童人数，我需要将其限制为x每个属性..

即。如果选择Station Masters House，最多可容纳8人..

因此，如果选择了5名成人，我需要儿童选择菜单，只显示5-8之间的差异，如果这是有意义的..

否则有人可以预订5个孩子和5个成年人......这将超过最多8个......

与选择托架的情况相同，最大占用率为4

由于

利

Answer 1

如果value中每个option的{{1}}属性列出与显示的数字相同，则可以使用jQuery获取该属性：

select

在第一个列表更改时获取所选项的值，并遍历第二个列表中的元素，删除任何会导致值大于允许总数的值。

已更新：请参阅this fiddle，了解其工作原理示例。

Answer 2

查看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/

Answer 3

$('select[name="adults"]').change(function(){
        var $c = $('select[name="children"]');
        $c.html(getNewSelect($(this).val()));
        $('#selectchildren').html($c.val());
    })

function getNewSelect(val){
    var opts = [];
    for(var i = 0; i < 8 - val; i ++){
        opts.push('<option val="', i+1, '">', i+1, '</option>');
    }
    return opts.join('');
}

根据我自己的口味，我可能会使用我为自己写的一个小lib来使它更顺畅..

$('select[name="adults"]').change(function(){
        var $c = $('select[name="children"]');
        var val = 8 - parseInt($(this).val());
        $c.html(Tog().map('1..'+val, 
        // this would return you something like 1..4
        // it means from 1 to 4, do a loop
            function(val){
                return Tog('option').val(val).cont(val);
            }).html()
            );
        $('#selectchildren').html($c.val());
    })

Answer 4

我知道它已经被接受了，但是我已经接受了它，所以这里是：fiddled。简单的实现，双向工作。

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

4 个答案: