javascript - 我有一个表单，我想隐藏一些文本字段，直到在下拉菜单中选择一个选项

Question

我有一个包含 3 个选项选项 1、选项 2 和选项 3 的下拉列表，然后每个选项都有 3 个文本字段，我希望隐藏文本字段，直到选择 1 个选项然后我只想显示这 3 个字段。

我一直在搜索并尝试了很多 javascript 函数，但它们根本不起作用，或者它们只显示 1 个文本字段，但如果它们切换选项，它们不会隐藏。

我放弃了问。

Answer 1

你可以试试 jQuery。首先将您的字段包装在 div 中，（每个 div 中的每个 se 组文本框）使用它来隐藏它们

CSS

}
.hidden {
    display:none;
} 

然后使用这个功能

jQuery

$(function(){
$("select[name='option1']").change(function(){
    if ($(this).val() == "value1"){
        $("div[name='group1']").show();
        $("div[name='group2']").hide();
        $("div[name='group3']").hide();
    }
});    

你的表单元素应该是这样的

HTML

<select name="option1" id="option1">
<option value="value1">value</option>
<option value="value2">value</option>
<option value="value3">value</option>
</select>

<div id="group1" name="group1" class="hidden" style="display: block; ">
<label>text:</label>
<input type="text" name="text1"><br><br>
<label>text:</label>
<input type="text" name="text2"><br><br>
<label>text:</label>
<input type="text" name="text3">
</div>

Answer 2

在选择和输入标签上放置一个类

<select class="opts">...</select>
// Other select tags
<input class="inputs" style="display: none; " ...>
// Other input tags

// Somewhere in a script tag
$('.opts').on('change', function() {
  $('.inputs').show()
  $('.opts').hide()
});