Question

我必须快速制作一个具有可选菜单的表单，具体取决于其他字段的值。我无法在纯HTML上找到任何内容。这可能只与HTML有关吗？

Answer 1

纯HTML可能不适合任务（除非HTML5中有新的动态功能，我不知道，这是完全可能的）。但是使用JavaScript（特别是在使用jQuery时），根据表单的状态动态显示/隐藏/更改表单元素和页面部分是非常简单的。

您要做的是将事件侦听器附加到驱动动态内容的表单元素，并且这些侦听器将相应地显示/隐藏/更改页面元素。你可以看看一个人为的例子here：

HTML：

<div id="firstSection">
    <select id="selectSomething">
        <option>Select...</option>
        <option>One</option>
        <option>Two</option>
    </select>
</div>
<div id="optionalSection">
    <select id="selectSomethingElse">
        <option>Select...</option>
        <option>Three</option>
        <option>Four</option>
    </select>
</div>

CSS：

#optionalSection
{
    display: none;
}

JavaScript的：

$('#selectSomething').change(function() {
    if ($('#selectSomething').val() == 'Two') {
        $('#optionalSection').show();
    } else {
        $('#optionalSection').hide();
    }
});

基本上第二部分是有条件显示的，具体取决于第一部分当前选择的部分。

请注意，从服务器的角度来看，所有表单元素仍会发布其值。此方法不会阻止第二部分包含在表单中，而只是显示给用户。在服务器端处理表单结果时，您仍然希望相应地重新验证业务逻辑。（绝不假设用户提供有效内容。）

Answer 2

我认为这不仅仅适用于HTML，但Javascript应该有效。

如何使用基于其他字段值更改的字段在HTML中创建表单

2 个答案: