基于选择框输入更改标签的 HTML/PHP/JS 表单答案

【问题标题】：HTML/PHP/JS Form that changes tags based on select box input基于选择框输入更改标签的 HTML/PHP/JS 表单
【发布时间】：2014-08-18 00:53:38
【问题描述】：

我一直在寻找有关如何允许表单用户创建自定义表单的教程。

例如，用户有一个带有选项的选择框：

协议 1
协议 2
协议 3

如果用户选择协议 1，则会出现一系列新的输入标签（即输入字段、文本区域等）。如果用户选择协议 2，则会出现一组不同的输入标签。

我以前在其他网站上看过它，但找不到教程或任何文档。可以只用普通的旧 css 隐藏和 JS 来完成，还是有更多的东西在起作用？请记住，我希望用户能够根据他们的协议选择将他们的数据提交到不同的表中。

谢谢！

【问题讨论】：

jQuery select change show/hide div event

标签： javascript php html css

【解决方案1】：

您当然可以只使用 CSS 和 JS...虽然我非常喜欢使用 jQuery 来处理这样的事情。重新发明轮子，还是使用它？从技术上讲，这可能无法回答您的问题，因为它不是纯 JS，但也许您只是希望以一种或另一种方式完成。

HTML：

<select name="select">
    <option value="value1">Value 1</option> 
    <option value="value2" selected>Value 2</option>
    <option value="value3">Value 3</option>
</select>
<div id="set-one"   class="set">Hi</div>
<div id="set-two"   class="set">Hey</div>
<div id="set-three" class="set">Hello</div>

JavaScript：

jQuery("#select").on("change", function() {
    selection = jQuery(this).val();
    if (selection === "value1") {
        jQuery("set").hide();
        jQuery("set-one").show();
    } else if (selection === "value2") {
        jQuery("set").hide();
        jQuery("set-two").show();
    } else if (selection === "value3") {
        jQuery("set").hide();
        jQuery("set-three").show();
    }
}

他们的苹果怎么样？

【讨论】：