display textbox as per the value selected from dropdown
Question
<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...
Thankyou..
3 answers
solution1
3 ACCPTED 2013-06-13 06:22:45
<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 :
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>
solution2
0 2013-06-13 06:13:33
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
solution3
0 2013-06-13 08:00:11
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.