Html 根据从下拉列表中选择的值显示文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17080217/
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
display textbox as per the value selected from dropdown
提问by rinold simon
<select>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
Hi everyone :)
嗨，大家好 ：）
I have a page with drop down list and text box.The drop down list contains numbers.. once the user select value from drop down list it will display text boxes based on the chosen number...
我有一个带有下拉列表和文本框的页面。下拉列表包含数字......一旦用户从下拉列表中选择值，它将根据所选数字显示文本框......
I don't know how to perform this function :(
我不知道如何执行此功能:(
I need help ..
我需要帮助 ..
If 1 is selected from dropdown 1 text box should be displayed , if 2 is selected from dropdown 2 text box should be displayed...same as for remaining...
如果从下拉列表中选择 1 应显示 1 文本框，如果从下拉列表中选择 2 应显示文本框...与其余...相同...
Thankyou..
谢谢..
回答by Sora
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#slct').change(function () {
var value = $(this).val(); var toAppend = '';
if (value == 1) {
toAppend = "<input type='textbox' >"; $("#container").html(toAppend); return;
}
if (value == 2) {
toAppend = "<input type='textbox' > <input type='textbox' >"; $("#container").html(toAppend); return;
}
if (value = 3) {
toAppend = "<input type='textbox' > <input type='textbox' > <input type='textbox' >"; $("#container").html(toAppend); return;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="slct">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
<div id="container"></div>
</div>
</form>
</body>
</html>
if jquery didn't work to you try this code :
如果 jquery 对您不起作用，请尝试以下代码：
function change() {
var select = document.getElementById("slct");
var divv = document.getElementById("container");
var value = select.value;
if (value == 1) {
toAppend = "<input type='textbox' >"; divv.innerHTML=toAppend; return;
}
if (value == 2) {
toAppend = "<input type='textbox' > <input type='textbox' >";divv.innerHTML = toAppend; return;
}
if (value = 3) {
toAppend = "<input type='textbox' > <input type='textbox' > <input type='textbox' >";divv.innerHTML = toAppend; return;
}
}
<select id="slct" onchange="change();">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
<div id="container"></div>
回答by Vignesh Paramasivam
Look at the link, you'll get the idea about it.. first you need to try something..
看看链接，你就会明白它的想法..首先你需要尝试一些东西..
how can select from drop down menu and call javascript function
回答by skparwal
You can try this code:
你可以试试这个代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#slct').change(function () {
var value = $(this).val(); var toAppend = '';
if (value == 1) {
toAppend = "<input type='textbox' >"; $("#container").html(toAppend); return;
}
if (value == 2) {
toAppend = "<input type='textbox' > <input type='textbox' >"; $("#container").html(toAppend); return;
}
if (value = 3) {
toAppend = "<input type='textbox' > <input type='textbox' > <input type='textbox' >"; $("#container").html(toAppend); return;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="slct">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
<div id="container"></div>
</div>
</form>
</body>
</html>
