Question

我需要通过使用一些数学和php动态地更改2个选择字段（JS解决方案也可以）。

示例：我正在预订行程...

我总共可以有8位旅客。
1个旅客必须是成年人
如果需要，其余的可以是7个孩子

成人选择字段：

@for($adults = 1; $adults<=8; $adults++)
   <option value="{{ $adults }}">{{ $adults }}</option>
@endfor

基于Adults值，这需要反映出还剩下多少个Kid点。

儿童选择字段：

@for($kids = 0; $kids <= 8 - $step->adults; $kids++)
    <option value="{{ $kids }}">{{ $kids }}</option>
@endfor

下面是一些简单的例子：

1个成人= 0-7个孩子
2个成人= 0-6个孩子
3个成人= 0-5个孩子
4个成人= 0-4个孩子等。

这是一个多步骤表单，我目前将所有内容存储在会话/ cookie中。就像我现在拥有的那样，仅当我单击继续按钮时，儿童逻辑才起作用。 （不理想）

我如何让孩子根据“成人”值立即更新在我继续下一个表格之前。

我目前正在使用Laravel / PHP，但是如果需要，可以使用JS解决方案。

我将不胜感激。

Answer 1

假设下拉菜单位于同一屏幕中，因为不需要刷新屏幕，因此需要一些JS，并监听初始下拉菜单（成人）。

document.querySelector('#num-adults').addEventListener('change', function() {
    var limit = 8;
    var numAdults = parseInt(this.value);
    document.querySelector('#num-children').selectedIndex = 0;
    var childrenOptions = document.querySelectorAll('#num-children option');
    [].forEach.call(childrenOptions, function(option) {
        var optionValue = parseInt(option.value);
        option.disabled = ((numAdults + optionValue) > limit);
    });
});

<select id="num-adults">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
</select>
<select id="num-children">
    <option selected disabled>Select number of children</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
</select>

Answer 2

您可以使用onchange中的成人选择字段JS事件来更新孩子选择字段。您也可以使用JS Object.onchange或Event Listeners。

Answer 3

jQuery解决方案：

$(document).ready(function () {
    $("#adult").change(function () {
        var val = $(this).val();
        if (val == "item1") {
            $("#kid").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#kid").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
        } else if (val == "item3") {
            $("#kid").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
        } else if (val == "item0") {
            $("#kid").html("<option value=''>--select one--</option>");
        }
    });
});

如何根据另一个选择字段值动态更改选择字段？

3 个答案: