Question

我想根据下拉列表框中的所选选项在表单中显示多个文本框。

例如，如果用户选择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>

在文件末尾＆lt;＆gt;这些我写了你的代码。

Answer 1

您可以使用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来放置生成的文本框。

Answer 2

我认为你可以借助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”中的代码即可。我想它会让你感到高兴。:)

根据下拉选择显示多个文本框

2 个答案: