在更改下拉选项时选择特定的表单
Select a specific form on change of dropdown option
我有两个表单，我想在更改下拉选项时显示。
意味着在选项form1中选择form1时应出现，在选项form2中选择form2时应出现。
我该怎么做？请给我建议
<!DOCTYPE html>
<html>
<head>
<title>Secelt Form</title>
<script type="text/javascript">
function fun1() {
document.getElementById('form1');
}
</script>
</head>
<body>
<label>Form 1</label>
<form method="post" name="firstform" id="form1" action="">
<button id="btn1" value="Select All">Select All</button>
<button id="btn3" value="Delete CheckBox">Delete CheckBox</button> <br><br>
<input type="checkbox" name="chk" value="One" id="ck1">One</input><br>
<input type="checkbox" name="chk" value="Two" id="ck2">Two</input><br>
<input type="checkbox" name="chk" value="Three" id="ck3">Three</input<br>
<input type="checkbox" name="chk" value="Four" id="ck4">Four</input>br>
<input type="checkbox" name="chk" value="Five" id="ck5">Five</input>br>
<button id="btn4" value="Status"">Status</button>
</form><hr>
<label>Form 2</label>
<form name="secondform" id="form2" action="">
Name : <input type="text" name="name" placeholder="Enter Your Name"><br><br>
Email : <input type="text" name="email" placeholder="Enter Email id"><br><br>
<button id="btn5" name="chk" >Submit</button>
</form><hr>
<label>Select Form</label>
<select id="select1" onchange="">
<option></option>
<option onselect="fun1()">Form 1</option>
<option>Form 2</option>
</select>
</body>
</html>
请尝试此代码
<!DOCTYPE html>
<html>
<head>
<title>Secelt Form</title>
<script type="text/javascript">
function setForm(value) {
if(value == 'form1'){
document.getElementById('form1').style='display:block;';
document.getElementById('form2').style='display:none;';
}
else {
document.getElementById('form2').style = 'display:block;';
document.getElementById('form1').style = 'display:none;';
}
}
</script>
</head>
<body>
<div id="form1">
<label>Form 1</label>
<form method="post" name="firstform" action="">
<button id="btn1" value="Select All">Select All</button>
<button id="btn3" value="Delete CheckBox">Delete CheckBox</button> <br><br>
<input type="checkbox" name="chk" value="One" id="ck1">One</input><br>
<input type="checkbox" name="chk" value="Two" id="ck2">Two</input><br>
<input type="checkbox" name="chk" value="Three" id="ck3">Three</input<br>
<input type="checkbox" name="chk" value="Four" id="ck4">Four</input>br>
<input type="checkbox" name="chk" value="Five" id="ck5">Five</input>br>
<button id="btn4" value="Status"">Status</button>
</form><hr>
</div>
<div id="form2" style="display: none">
<label>Form 2</label>
<form name="secondform" action="">
Name : <input type="text" name="name" placeholder="Enter Your Name"><br><br>
Email : <input type="text" name="email" placeholder="Enter Email id"><br><br>
<button id="btn5" name="chk" >Submit</button>
</form><hr>
</div>
<label>Select Form</label>
<select id="select1" onchange="setForm(this.value)">
<option value="form1">Form 1</option>
<option value="form2">Form 2</option>
</select>
</body>
</html>
您发布的代码有很多问题，但只是为了回答您最初的问题，以下内容将允许您切换每个表单的显示状态。我强烈建议您重新修改它们，但解决方案的机制是在加载时隐藏表单，然后根据所选选项显示一个或另一个表单。
$(document).ready(function(){
$('#selectForm').change(function(){
var formID = $(this).val();
$('form').css('display','none');
$('#'+formID).css('display','block');
})
})form{display:none}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Secelt Form</title>
</head>
<body>
<label>Select Form</label>
<select id="selectForm">
<option></option>
<option value="form1">Form 1</option>
<option value="form2">Form 2</option>
</select>
<hr/>
<form method="post" name="firstform" id="form1" action="">
<label>Form 1</label>
<button id="btn1" value="Select All">Select All</button>
<button id="btn3" value="Delete CheckBox">Delete CheckBox</button> <br><br>
<input type="checkbox" name="chk" value="One" id="ck1">One</input><br>
<input type="checkbox" name="chk" value="Two" id="ck2">Two</input><br>
<input type="checkbox" name="chk" value="Three" id="ck3">Three</input><br>
<input type="checkbox" name="chk" value="Four" id="ck4">Four</input><br>
<input type="checkbox" name="chk" value="Five" id="ck5">Five</input><br>
<button id="btn4" value="Status">Status</button>
</form>
<form name="secondform" id="form2" action="">
<label>Form 2</label>
Name : <input type="text" name="name" placeholder="Enter Your Name"><br><br>
Email : <input type="text" name="email" placeholder="Enter Email id"><br><br>
<button id="btn5" name="chk" >Submit</button>
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Select Form</title>
<script type="text/javascript">
function fun1() {
var xx = document.getElementById('select1').value;
fun2();
if(xx==1)
{
document.getElementById('form1').style.display = "block";
}
else if(xx==2)
{
document.getElementById('form2').style.display = "block";
}
else
{
}
}
function fun2()//to hide all form elements
{
var x = document.getElementsByTagName("form");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</head>
<body>
<form method="post" name="firstform" id="form1" action="">
<label>Form 1</label><br>
<button id="btn1" value="Select All">Select All</button>
<button id="btn3" value="Delete CheckBox">Delete CheckBox</button> <br><br>
<input type="checkbox" name="chk" value="One" id="ck1">One</input><br>
<input type="checkbox" name="chk" value="Two" id="ck2">Two</input><br>
<input type="checkbox" name="chk" value="Three" id="ck3">Three</input><br>
<input type="checkbox" name="chk" value="Four" id="ck4">Four</input><br>
<input type="checkbox" name="chk" value="Five" id="ck5">Five</input><br>
<button id="btn4" value="Status">Status</button><hr>
</form>
<form name="secondform" id="form2" action="">
<label>Form 2</label><br>
Name : <input type="text" name="name" placeholder="Enter Your Name"><br><br>
Email : <input type="text" name="email" placeholder="Enter Email id"><br><br>
<button id="btn5" name="chk" >Submit</button><hr>
</form>
<label>Select Form</label>
<select id="select1" onchange="fun1()">
<option ></option>
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>
</body>
<script type="text/javascript">
fun2();//to hide form elements after page has loaded completely
</script>
</html>
我用纯javascript编写，但Jquery将是简单的
根据我对您的问题的理解。您希望显示在下拉菜单中选择的窗体。
在这里我修改您的代码相同。
<!DOCTYPE html>
<html>
<head>
<title>Secelt Form</title>
<script type="text/javascript">
function HidebothForm()
{
document.getElementById("form2id").style.visibility = "hidden";
document.getElementById("form1id").style.visibility = "hidden";
}
function fun1() {
var e = document.getElementById('select1');
var selectedOption = e.options[e.selectedIndex].value;
if(selectedOption == "frm1")
{
document.getElementById("form2id").style.visibility = "hidden";
document.getElementById("form1id").style.visibility = "visible";
}
else if(selectedOption == "frm2")
{
document.getElementById("form2id").style.visibility = "visible";
document.getElementById("form1id").style.visibility = "hidden";
}
else
{
HidebothForm();
}
}
</script>
</head>
<body onload="HidebothForm()">
<div id="form1id">
<label>Form 1</label>
<form method="post" name="firstform" id="form1" action="">
<button id="btn1" value="Select All">Select All</button>
<button id="btn3" value="Delete CheckBox">Delete CheckBox</button> <br><br>
<input type="checkbox" name="chk" value="One" id="ck1">One</input><br>
<input type="checkbox" name="chk" value="Two" id="ck2">Two</input><br>
<input type="checkbox" name="chk" value="Three" id="ck3">Three</input<br>
<input type="checkbox" name="chk" value="Four" id="ck4">Four</input>br>
<input type="checkbox" name="chk" value="Five" id="ck5">Five</input>br>
<button id="btn4" value="Status"">Status</button>
</form>
</div>
<hr>
<div id="form2id">
<label>Form 2</label>
<form name="secondform" id="form2" action="">
Name : <input type="text" name="name" placeholder="Enter Your Name"><br><br>
Email : <input type="text" name="email" placeholder="Enter Email id"><br><br>
<button id="btn5" name="chk" >Submit</button>
</form>
</div>
<hr>
<label>Select Form</label>
<select onchange="fun1()" id="select1">
<option></option>
<option value="frm1">Form 1</option>
<option value="frm2">Form 2</option>
</select>
</body>
</html>
希望这对你有帮助。
相关文章：
- 在带有 bootbox 的自定义对话框中添加选项以选择表单控件.js在 ASP.NET MVC 中
- 如何通过按钮更改选择表单
- 在提交数据之前更改选择表单元素中的值
- 试图让Jquery在Rails和ActiveAdmin中使用动态选择表单
- HTML使用选择表单更改输入选择(可能使用JQuery?）
- Mootools提交表单仅在通过ID选择表单时有效
- 如何发布单选和复选框选择?表单由php和js处理
- 订阅选择表单中的不同选项
- 带有选择表单和文本字段的简单计算器
- text(）不适用于选择表单输入
- 按下按键输入时输入表单和选择表单之间的冲突
- 选择表单后从数据库中获取隐藏的输入值
- 如何在给定焦点时选择表单输入中的文本
- 触发链接以在 If 语句中选择表单时触发
- 使用 Javascript 函数从 HTML 选择表单生成价格
- 使用 JavaScript 清空选择表单元素
- Ajax 动态选择表单未提交值
- JavaScript 选择表单选项
- 创建元素时不要更改选择表单的选项
- 如何做一个HTML选择表单，其中所选选项更新JSON值
