HTML/PHP/JS根据选择框输入改变标签的表单

HTML/PHP/JS Form that changes tags based on select box input

本文关键字：改变 输入 标签 表单 选择 PHP JS HTML      更新时间：2023-09-26

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

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

  • 协议1
    • 协议2
  • 协议3

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

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

谢谢!

你当然可以只用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();
    }
}
这些苹果怎么样?
相关文章：