Javascript 根据选择的选项显示/隐藏不同的表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11959889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/Hide different forms based on a option selected
提问by gdinari
I would like to know how to show/hide different forms based one form's selection.
我想知道如何根据一个表单的选择显示/隐藏不同的表单。
In the sample code below all three forms are automatically set to display:none. I would like to only show one of the "hidden" forms if its corresponding value is selected from the "shower" form. So if option "Form 1" is selected from the "shower" form, then show Form 1 below; if option "Form 2" is selected from the "shower" form, then show Form 2; and so on.
在下面的示例代码中，所有三种形式都自动设置为 display:none。如果从“淋浴”表单中选择了相应的值，我只想显示其中一个“隐藏”表单。因此，如果从“淋浴”表格中选择了“表格 1”选项，则在下方显示表格 1；如果从“淋浴”表格中选择了“表格 2”选项，则显示表格 2；等等。
Preferably with a fade in/out animation to it or another light animation.
最好带有淡入/淡出动画或其他灯光动画。
Here is a sample...
这是一个示例...
<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>
Thanks for any help with this.
感谢您对此的任何帮助。
回答by Simon
You can use jQuery to help you with it :
您可以使用 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>
I added an id to your select and change the id name of your three forms :)
我在您的选择中添加了一个 id 并更改了三个表单的 id 名称:)
Hope it helps :)
希望能帮助到你 ：）
回答by Taha Rehman Siddiqui
just add this to the end of the HTML
只需将此添加到 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>
回答by Roger Medeiros
<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:
JS：
$("select").on("change", function() {
$("#" + $(this).val()).show().siblings().hide();
});?
Sample at http://jsfiddle.net/dfYAs/
回答by RocketDonkey
If you don't want to use jQuery, you can add this to the top of your HTML:
如果您不想使用 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>
and then add onchange="changeForm(this)to your main form.
然后添加onchange="changeForm(this)到您的主窗体。
回答by Nathan Calvank
For future readers, this setup will show/hide those forms dynamically with no external libraries:
对于未来的读者，此设置将在没有外部库的情况下动态显示/隐藏这些表单：
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')
}
}
}
Then the html:
然后是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>?????????????????????????????
回答by Carlos Alberto Blanco Vivas
make this
做这个
create function javascript that help u with that work, something like this
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;
} }
Create event
创建帮助你完成这项工作的函数 javascript，就像这样
function FFF(){ var opc = document.getElementById("form-shower").value; switch(opc) { 'form_name1': document.getElementById('form_1').style.display = "block"; // 或内联或无任何中断；
} }
创建事件
