根据下拉选择显示多个文本框
[英]Show a number of text boxes based on dropdown selection
问题描述
我想根据下拉列表框中的选定选项在表单中显示多个文本框。
例如，如果用户选择1，则应显示1个文本框，如果用户选择2，则应显示2个文本框。 我需要在PHP中完成它。
我使用jQuery找到了一些答案。 我们可以在PHP中使用jQuery吗？ 如果是，那怎么样？
编辑
@Edwin Alex这是我的选择选项的样子。
<h2><u>DEPENDENT DETAILS</u></h2><br />
<table border="1" style="border-style:dotted" width="100%" id="dependenttable">
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td></tr>
<tr id="textboxDiv"></tr>
在<>中的文件末尾，我已经编写了代码。
2 个解决方案
解决方案1
2 已采纳 2013-01-31 09:27:39
您可以使用Jquery来实现此目的。 尝试这个，
HTML：
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td>
</tr>
<tr id="textboxDiv"></tr>
Jquery：
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#textboxDiv").html('');
if(selVal > 0) {
for(var i = 1; i<= selVal; i++) {
$("#textboxDiv").append('<input type="text" name="textVal[]" value="" />');
}
}
});
});
</script>
将此代码粘贴到页面底部的标记内。
您的选择框ID应该是dropdown 。
您需要一个带有ID textboxDiv的div来放置生成的文本框。
解决方案2
0 2013-01-31 09:25:05
我认为你可以借助JavaScript轻松完成。 这是一个例子。 尝试并根据您的要求进行修改
<html>
<head>
<title>Select DIV to show</title>
<script type="text/javascript">
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<count;i++)
document.getElementById('myDiv'+i).style.display = 'none';
if(no>0)
document.getElementById('myDiv'+no).style.display = 'block';
}
</script>
</head>
<body>
<form name="myForm">
<select onChange="show(this)">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
<div id="myDiv1" style="display:none"> <form>
<select>
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form></div>
<div id="myDiv2" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
<div id="myDiv3" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
</body>
</html>
在这个例子中，只需更改“myDiv1”，“myDiv2”，“myDiv3”中的代码即可。 我想它会帮助你。:)
根据用户从下拉列表中的选择显示许多文本框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.