根据所选选项显示/隐藏不同的表单
Show/Hide different forms based on a option selected
我想知道如何根据一个表单的选择显示/隐藏不同的表单。
在下面的示例代码中，所有三个表单都自动设置为 display：none。如果从"淋浴"表单中选择相应的值，我只想显示其中一个"隐藏"表单。因此，如果从"淋浴"表格中选择"表格 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>
我在您的选择中添加了一个 id，并更改了您的三个表单的 id 名称:)
希望对:)有所帮助
<select>
<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 name="form_1" id="form_1" style="display:none">
<input type="text" value="1">
</form>
<form name="form_2" id="form_2" style="display:none">
<input type="text" value="2">
</form>
<form name="form_3" id="form_3" style="display:none">
<input type="text" value="3">
</form>
.JS：
$("select").on("change", function() {
$("#" + $(this).val()).show().siblings().hide();
});
样品在http://jsfiddle.net/dfYAs/
只需将其添加到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>
对于未来的读者，此设置将动态显示/隐藏这些表单，而无需外部库：
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')
}
}
}
然后是 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>
如果你不想使用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>
，然后将onChange="changeForm(this)"添加到主窗体。on更改不区分大小写。
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
}).change();
});.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red {
background: #ff0000;
}
.green {
background: #228B22;
}
.blue {
background: #0000ff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<div>
<select>
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div id="check" class="red box">You have selected <strong>red option</strong> so i am here</div>
<div id="check" class=" box">You have selected <strong>green option</strong> so i am here</div>
<div id="check" class="box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>- 创建函数 JavaScript 来帮助你完成这项工作，就像这样
function FFF(){
var opc = document.getElementById("form-shower").value;
switch(opc)
{
'form_name1':
document.getElementById('form_1').style.display = "block"; // or inline or none whatever
break;
}
}
- 创建事件
<select id='id_selec' onChange='javascript:FFF();'>
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
}).change();
});.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red {
background: #ff0000;
}
.green {
background: #228B22;
}
.blue {
background: #0000FF;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<div>
<select>
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div id="check" class="red box">You have selected <strong>red option</strong> so i am here</div>
<div id="check" class="green box">You have selected <strong>green option</strong> so i am here</div>
<div id="check" class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>相关文章：
- 使用javascript取消隐藏和隐藏表单中的某些元素
- 如何使用javascript隐藏表单的选项
- 模拟隐藏表单提交&使用JavaScript重定向以实现安全支付
- 未执行Ajax隐藏表单提交验证
- 在同一个html页面中显示servlet响应而不隐藏表单
- 自动提交隐藏表单值
- 如何筛选出发布的隐藏表单输入类型
- 如何在angularjs中提交后隐藏表单
- 如果用户登录了Backbone，JavaScript，如何显示/隐藏表单
- 显示/隐藏表单区域(im 使用引导程序）
- 如何隐藏表单并仅在选中时显示
- 如何通过隐藏表单在同一页面中显示表单输出
- 如何在同一窗口中显示表单输出并隐藏表单
- 使用 jquery 选择选项时隐藏表单选项
- 当一组元素的所有元素都具有特定值时，如何隐藏表单元素
- 如果禁用了javascript，则隐藏表单
- 选择下拉列表中的值时隐藏表单
- 无法隐藏/取消隐藏表单内的按钮
- 如何根据最后选择的选项(单选按钮）使用 javascript 隐藏表单输入
- 显示和隐藏表单
