我想知道如何根据一个表单的选择显示/隐藏不同的表单。
在下面的示例代码中,所有三种表单都自动设置为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>
感谢您提供任何帮助。
答案 0 :(得分:7)
您可以使用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名称:)
希望有所帮助:)
答案 1 :(得分:1)
只需将其添加到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>
答案 2 :(得分:1)
<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();
});
答案 3 :(得分:1)
如果您不想使用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)
添加到主表单中。
答案 4 :(得分:0)
制作本
创建函数javascript,帮助你完成这项工作,就像这样
function FFF(){ var opc = document.getElementById(“form-shower”)。value; 开关(OPC) { 'form_name1': document.getElementById('form_1')。style.display =“block”; //或内联或无论如何 打破;
} }
创建活动
答案 5 :(得分:0)
对于未来的读者,此设置将动态显示/隐藏这些表单,而不使用外部库:
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>
答案 6 :(得分:0)
$(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>