Question

我的成人和儿童有两种选择：

<select name="BKG_Adult">
    <option value="1" data-price="1000">1</option>
    <option value="2" data-price="2000">2</option>
    <option value="3" data-price="3000">3</option>
    <option value="4" data-price="4000">4</option>
</select>

<select name="BKG_Child">
    <option value="0" data-price="0">0</option>
    <option value="1" data-price="500">1</option>
    <option value="2" data-price="1000">2</option>
    <option value="3" data-price="1500">3</option>
</select>

<input type="hidden" id="dynamic_availability" name="dynamic_availability" value="4">

隐藏字段动态可用性由页面加载时的外部Web服务填充，以提供巡视中可用的总座位数。选项也会在页面加载时填充。

表格的主要规则是至少有一位成年人必须在旅行中旅行。其余的座位可以由儿童和成人组成。

如果选择了2名成年人，我需要减少孩子选择的选项数量，以确保用户不能选择超过4人。同样，如果在孩子中选择了2个孩子，我必须限制成人选择中的值，但仍然要确保至少选择了一个成人。

本质上，这将使用子和成人选择字段的onchange事件，但复杂性是根据上面定义的规则过滤选项。当然，如果用户要减少在一个字段中选择的选项数量，则选项数量应该在另一个字段中增加，这样用户仍然可以选择最多4个。

有没有人知道这样的功能的例子，或者如何在vanilla javascript或jquery中实现它？

Answer 1

$(function() {
    var max = $("#dynamic_availability").val(),
        $adult = $("#adult"),
        $child = $("#child");
    fillCmb($adult, 1, max);
    fillCmb($child, 0, max - 1);
    $adult.on("change", function() {
        var cant = $(this).val();
        fillCmb($child, 0, max - cant);
    });
    $child.on("change", function() {
        var cant = $(this).val();
        fillCmb($adult, 1, max - cant);
    });

    function fillCmb($cmb, min, max) {
        var val = $cmb.val();
        $cmb.empty();
        for (var i = min; i <= max; i++)
            $cmb.append("<option value=\"" + i + "\">" + i + "</option>");
        if (val)
            $cmb.val(val);
    }
});

http://jsfiddle.net/paska/9ac1ta7u/2/

Answer 2

function changeSelect(element, otherSelectValue){
    var options = element.find(option);
    for(x=0; options.length; x++){
        if((options[x].value() + value) > 4){
            options[x].remove();
        }
    }
}

$('#adult', '#child').on('change', function(){
   if(this.attr('id') === 'adult'){
       changeSelect($('#child'), this.val());
   }else{
       changeSelect($('#adult'), this.val());
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="adult" name="BKG_Adult">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select id="child" name="BKG_Child">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

根据两个选项和总可用性筛选两个选择字段

2 个答案: