Here I have multiple listbox and when I click an option dynamic textbox should be generated Javascript.
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}
</script>
</head>
<body>
<select id="selectBox" multiple onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
Solution using JS Core:
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var input = document.createElement('input');
input.value = selectBox.options[selectBox.selectedIndex].value;
input.type = text;
document.getElementbyId('input_fields').appendChild(input);
}
Add the following div to your body
<div id="input_fields"></div>
The Solution becomes much easier if you use jQuery:
function changeFunc() {
$("#input_fields").append("<input type='text' value='"+$("#selectBox").val()+"'>");
}
This will simply append the HTML inside the div with id="input_fields"
is this you want?
<html> <head> <script type="text/javascript"> function changeFunc() { var selectBox = document.getElementById("selectBox"); var selectedValue = selectBox.options[selectBox.selectedIndex].value; var textP = document.createElement('p'); textP.innerHTML = selectedValue; document.body.appendChild(textP); } </script> </head> <body> <select id="selectBox" multiple onchange="changeFunc();"> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> </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.