I have a multiple selectable listbox in which I can select maximum 5 data
I have 5 textboxes
Now I want to get the selected items texts from the listbox and populate those into the 5 textboxes when the user finishes selectiong from the listbox
How can it be possible in JavaScript
pls help
The code below demonstrates how to obtain selected value from select tags. Only desirable selected value would be listed inside 5 text boxes after a user click on the 'Finish' button. Because you said the selection can be up to 5, any of those that are not selected will not be included in the input text.
The function is hard-coded, so it is not flexible. You may make it more flexible by passing in select and input tag IDs. It is up to you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
// hard-coded inside the function.
function populate() {
var sel1 = document.getElementById("list1")
var sel2 = document.getElementById("list2")
var sel3 = document.getElementById("list3")
var sel4 = document.getElementById("list4")
var sel5 = document.getElementById("list5")
var result = new Array()
if (sel1.options[sel1.selectedIndex].value!="?") {
result.push(sel1.options[sel1.selectedIndex].value)
}
if (sel2.options[sel2.selectedIndex].value!="?") {
result.push(sel2.options[sel2.selectedIndex].value)
}
if (sel3.options[sel3.selectedIndex].value!="?") {
result.push(sel3.options[sel3.selectedIndex].value)
}
if (sel4.options[sel4.selectedIndex].value!="?") {
result.push(sel4.options[sel4.selectedIndex].value)
}
if (sel5.options[sel5.selectedIndex].value!="?") {
result.push(sel5.options[sel5.selectedIndex].value)
}
// populate the selected value into text boxes
for (var i=0; i<result.length; i++) {
document.getElementById("box"+(i+1)).value = result[i]
}
}
</script>
</head>
<body>
Selection 1: <select id="list1">
<option value="?">No select</option>
<option value="list1Val1">Val1</option>
<option value="list1Val2">Val2</option>
<option value="list1Val3">Val3</option>
<option value="list1Val4">Val4</option>
</select>
<br />
Selection 2: <select id="list2">
<option value="?">No select</option>
<option value="list2Val1">Val1</option>
<option value="list2Val2">Val2</option>
<option value="list2Val3">Val3</option>
<option value="list2Val4">Val4</option>
</select>
<br />
Selection 3: <select id="list3">
<option value="?">No select</option>
<option value="list3Val1">Val1</option>
<option value="list3Val2">Val2</option>
<option value="list3Val3">Val3</option>
<option value="list3Val4">Val4</option>
</select>
<br />
Selection 4: <select id="list4">
<option value="?">No select</option>
<option value="list4Val1">Val1</option>
<option value="list4Val2">Val2</option>
<option value="list4Val3">Val3</option>
<option value="list4Val4">Val4</option>
</select>
<br />
Selection 5: <select id="list5">
<option value="?">No select</option>
<option value="list5Val1">Val1</option>
<option value="list5Val2">Val2</option>
<option value="list5Val3">Val3</option>
<option value="list5Val4">Val4</option>
</select>
<br /><br />
<input type="button" value="Finish" onclick="populate()">
<br /><br />
<input type="text" id="box1" size="10">
<input type="text" id="box2" size="10">
<input type="text" id="box3" size="10">
<input type="text" id="box4" size="10">
<input type="text" id="box5" size="10">
</body>
</html>Something like this
for (var i = 0; i < mySelect.options.length; i++) {
if (mySelect.options[i].selected)
document.write(" mySelect.options[i].text\n")
}We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.