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

I have a form that I want to hide some textfields until one option y selected on a dropdown menu

本文关键字：选择 选项 一个 下拉菜单 表单 有一个 隐藏 字段 文本      更新时间：2023-09-26

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

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

我放弃了，问道。

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

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

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

<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()
});
相关文章：