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

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

javascript jquery html

Javascript 如何在HTML页面中构建多个步骤选择器？,javascript,jquery,html,contact-form,Javascript,Jquery,Html,Contact Form,我对HTML联系人表单有问题。例如，我有一个带有元素依赖关系的模式：在哪里有许多选择器和输入取决于在前面的步骤中选择了什么如何在HTML和Javascript Jquery中构建这种逻辑对于结果，我需要返回一个输入隐藏字段，其中放置所有选定值，例如：现金-在Compensa partners-在Riga之外-从所选选项提供服务也许有一些Jquery解决方案可以达到这个目的另外，我只能使用HTML页面最简单的例子：写出所有不同的选择，只显示相关的选择。您可以以类似的方式添加所有其他依

我对HTML联系人表单有问题。例如，我有一个带有元素依赖关系的模式：

在哪里有许多选择器和输入取决于在前面的步骤中选择了什么

如何在HTML和Javascript Jquery中构建这种逻辑

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

现金-在Compensa partners-在Riga之外-从所选选项提供服务

也许有一些Jquery解决方案可以达到这个目的

另外，我只能使用HTML页面

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

<!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>

到目前为止，您尝试了什么？它在哪里抛出错误？所以，我试图修复代码中的错误，而不是为您编写代码。我并没有要求为我编写所有代码。我只想举例说明如何使用jquery或类似的东西来实现这一点。我尝试了show、hide和change attr'name，但用该方法构建所有依赖项太难了。您要么写出所有不同的选项，要么只显示正确的分支，或者你创建一个包含所有这些分支的映射，并动态编辑几个标记的选项。也许你可以发送一些带有示例的链接？@AlexIL这不是StackOverflow的工作方式。有很多方法可以解决你的问题，问题太广泛了。对于您已经编写但不起作用的代码的问题，而不是建议，也是如此。尝试