Javascript 根据选定的选项显示/隐藏不同的表单

我想知道如何根据一个表单的选择显示/隐藏不同的表单

在下面的示例代码中，所有三个表单都自动设置为显示：无。如果从“shower”窗体中选择了相应的值，我只想显示其中一个“hidden”窗体。因此，如果从“淋浴”表格中选择选项“表格1”，则显示下面的表格1；如果从“淋浴”窗体中选择选项“窗体2”，则显示窗体2；等等

最好使用淡入/淡出动画或其他灯光动画

这是一个样本

<form id="form-shower">
<select>
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>

<form name="form_name1" id="form_1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_3" style="display:none">
<!---- THIS IS FORM 3---->
</form>

表格一
表格二
表格三

---

感谢您的帮助。

您可以使用jQuery来帮助您：

<form id="form-shower">
<select id="myselect">
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>

<form name="form_name1" id="form_name1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_name2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_name3" style="display:none">
<!---- THIS IS FORM 3---->
</form>
<script>
$("#myselect").on("change", function() {
    $("#" + $(this).val()).show().siblings().hide();
})
</script>

表格一
表格二
表格三
$（“#myselect”）。关于（“更改”，函数（）{
$（“#”+$（this.val（））.show（）.sides（）.hide（）；
})

我为您的选择添加了一个id，并更改了三个表单的id名称：）

希望有帮助：）

做这个

创建函数javascript来帮助您完成这项工作，类似这样

函数FFF（）{
var opc=document.getElementById（“表单淋浴”）.value；
交换机（opc）
{
“表格名称1”：
document.getElementById（'form_1'）.style.display=“block”//或内联或无
打破
}
}

创建事件

---

只需将其添加到HTML的末尾即可

    <script type="text/javascript">
    $('select').change(function(e){
            $this = $(e.target);
            var selected_form = $this.text().replace(' ','_name');
            $('form').hide(2000, 'easeOutExpo');
            $(selected_form).show(2000, 'easeOutExpo');
        });
    </script>

$（'select'）。更改（函数（e）{
$this=$（e.target）；
var selected_form=$this.text（）.replace（“”，“_name”）；
$（'form'）.hide（2000，'easoutexpo'）；
$（选定表格）.show（2000年，'easoutexpo'）；
});

样品在

---

如果不想使用jQuery，可以将其添加到HTML的顶部：

<script>
function changeForm(form) {
  for (var i=0; i<form.length; i++){
    var form_op = form.options[i].value;
    if (form_op == form.value) {
      document.getElementsByName(form_op)[0].style.display = "block";
    }
    else {
      document.getElementsByName(form_op)[0].style.display = "none";
    }
   }
  }
</script>

函数变换形式（形式）{
对于（var i=0；i，对于未来的读者，此设置将动态显示/隐藏这些表单，而无需外部库：

function changeOptions(selectEl) {
  let selectedValue = selectEl.options[selectEl.selectedIndex].value;
  let subForms = document.getElementsByClassName('className')
  for (let i = 0; i < subForms.length; i += 1) {
    if (selectedValue === subForms[i].name) {
      subForms[i].setAttribute('style', 'display:block')
    } else {
      subForms[i].setAttribute('style', 'display:none') 
    }
  }
}

功能更改选项（选择EL）{
让selectedValue=selectEl.options[selectEl.selectedIndex].value；
let subForms=document.getElementsByCassName（'className'）
for（设i=0；i

然后html：

<select onchange="changeOptions(this)">
  <option value="" selected="selected"></option>
  <option value="form_1">Form 1</option>
  <option value="form_2">Form 2</option>
  <option value="form_3">Form 3</option>
</select>

<form class="className" name="form_1" id="form_1" style="display:none">
  <!---- THIS IS FORM 1---->
</form>

<form class="className" name="form_2" id="form_2" style="display:none">
  <!---- THIS IS FORM 2---->
</form>

<form class="className" name="form_3" id="form_3" style="display:none">
  <!---- THIS IS FORM 3---->
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​


表格一
表格二
表格三
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$（文档）.ready（函数（）{
$（“选择”）.change（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
var optionValue=$（此）.attr（“值”）；
如果（选项值）{
$（“.box”）.not（“.”+optionValue.hide（）；
$（“+optionValue）.show（）；
}否则{
$（“.box”）.hide（）；
}
});
}).change（）；
})；
.box{
颜色：#fff；
填充：20px；
显示：无；
边缘顶部：20px；
}
瑞德先生{
背景：#ff0000；
}
格林先生{
背景：#228B22；
}
蓝先生{
背景：#0000ff；
}

jQuery使用选择框显示隐藏元素
选择颜色
红色
绿色
蓝色
您选择了红色选项，所以我在这里
您选择了绿色选项，所以我在这里
您选择了蓝色选项，所以我在这里
Hi RocketDonkey，这个解决方案很有效，但当我选择不同的选项时，表单不会消失，它们只是在我选择更多的选项时添加到页面上……哈，我想这会很有用吧？看起来你已经得到了答案，但我会调整我的答案，以防你需要一个jQuery更少的响应。我对这段代码有一个问题，第一次看到一些操作如果选择了tion，它将不执行任何操作，但当我选择另一个时，它将显示。
function changeOptions(selectEl) {
  let selectedValue = selectEl.options[selectEl.selectedIndex].value;
  let subForms = document.getElementsByClassName('className')
  for (let i = 0; i < subForms.length; i += 1) {
    if (selectedValue === subForms[i].name) {
      subForms[i].setAttribute('style', 'display:block')
    } else {
      subForms[i].setAttribute('style', 'display:none') 
    }
  }
}

<select onchange="changeOptions(this)">
  <option value="" selected="selected"></option>
  <option value="form_1">Form 1</option>
  <option value="form_2">Form 2</option>
  <option value="form_3">Form 3</option>
</select>

<form class="className" name="form_1" id="form_1" style="display:none">
  <!---- THIS IS FORM 1---->
</form>

<form class="className" name="form_2" id="form_2" style="display:none">
  <!---- THIS IS FORM 2---->
</form>

<form class="className" name="form_3" id="form_3" style="display:none">
  <!---- THIS IS FORM 3---->
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​