Question

我的HTML联系表单有问题。例如，我有那个具有元素依赖性的模式：

许多选择器和输入的位置取决于之前步骤中选择的内容。

如何在HTML和Javascript（Jquery）中构建该逻辑？

对于结果，我需要返回一个输入隐藏字段，其中放置所有选定的值，例如：

现金 - 在Compensa合作伙伴 - 里加以外 - 来自选定选项的Serviss

为此可能有一些Jquery解决方案？

P.S。我只能使用HTML页面

Answer 1

最小示例：写出所有不同的选择并仅显示相关的选择。您可以以类似的方式添加所有其他依赖项。动态构建选择将更少，但代码更复杂。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Example</title>
    <style>
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    <div id="claim">
        <select>
            <option value="default" disabled="disabled" selected="selected">Select a claim type</option>
            <option value="cash">Cash</option>
            <option value="repair">Repair</option>
            <option value="glazing">Glazing</option>
        </select>
    </div>
    <div id="cash" class="hide">
        <select>
            <option value="partners">At Compensa partners</option>
            <option value="office">Compensa Office</option>
            <option value="broken">Verhicle is broken</option>
        </select>       
    </div>
    <div id="repair" class="hide">
        <select>
            <option value="age">Car age</option>
            <option value="place">Serviss place</option>
        </select>   
    </div>
    <script>
        var dependencies = {
            'claim' : {
                'cash' : 'nextDep',
                'repair' : 'nextDep',
                'glazing' : 'nextDep'
            }
        };
        document.querySelector('#claim select').addEventListener('change', function ( event ) {
            var parentID = event.target.parentNode.id,
                value = event.target.value;
            Object.keys(dependencies[parentID]).forEach(function ( key ) {
                var select = document.querySelector('#' + key),
                    currentClass = select.className;
                if (select.id === value && currentClass === 'hide') select.className = 'show';
                else if (currentClass !== 'hide') select.className = 'hide';
            });
        });
    </script>
</body>
</html>

如何在HTML页面中构建多个步骤选择器？

1 个答案: