JavaScript controls how the data is exchanged around the listbox in two list boxes _javascript tips

This example describes the way JavaScript controls the exchange of data around the listbox in two ListBox. Share to everyone for your reference. The specific analysis is as follows:

We often use this feature to move the elements of the left list box to the right, or to move the elements of the right list box to the left, and to move all at once

Copy Code code as follows:

function Listbox_moveacross (SourceID, DestID) {
var src = document.getElementById (SourceID);
var dest = document.getElementById (DestID);
for (var count=0; count < src.options.length; count++) {
if (src.options[count].selected = = True) {
var option = Src.options[count];
var newoption = document.createelement ("option");
Newoption.value = Option.value;
Newoption.text = Option.text;
Newoption.selected = true;
try {
Dest.add (newoption, NULL); Standard
Src.remove (count, null);
}catch (Error) {
Dest.add (newoption); IE only
Src.remove (count);
}
count--;
}
}
}
//..
Listbox_moveacross (' countrylist ', ' selectedcountrylist ');

Here is a demo effect code like yes that can be done directly in the browser

Copy Code code as follows:

Click below buttons to move selected options right or left.<br>
<table>
<tbody><tr>
<td>
<select id= "Sourceselect" size= "multiple=" ">
<option value= "a" >Afghanistan</option>
<option value= "B" >Bahamas</option>
<option value= "C" >Barbados</option>
<option value= "D" >Belgium</option>
<option value= "E" >Bhutan</option>
<option value= "F" >China</option>
<option value= "G" >Croatia</option>
<option value= "H" >Denmark</option>
<option value= "I" >France</option>
</select>
</td>
<td>
<button onclick= "Listboxmoveacross (' sourceselect ', ' destselect ');" >>></button> <br>
<button onclick= "Listboxmoveacross (' destselect ', ' sourceselect ');" ><<</button>
</td>
<td>
<select id= "Destselect" size= "multiple=" ">
<option value= "a" >Afghanistan</option>
<option value= "B" >Bahamas</option>
<option value= "C" >Barbados</option>
<option value= "D" >Belgium</option>
<option value= "E" >Bhutan</option>
<option value= "F" >China</option>
<option value= "G" >Croatia</option>
<option value= "H" >Denmark</option>
<option value= "I" >France</option>
</select>
</td>
</tr>
</tbody></table>
<script>
function Listboxmoveacross (SourceID, DestID) {
var src = document.getElementById (SourceID);
var dest = document.getElementById (DestID);
for (var count=0; count < src.options.length; count++) {
if (src.options[count].selected = = True) {
var option = Src.options[count];
var newoption = document.createelement ("option");
Newoption.value = Option.value;
Newoption.text = Option.text;
Newoption.selected = true;
try {
Dest.add (newoption, NULL); Standard
Src.remove (count, null);
}catch (Error) {
Dest.add (newoption); IE only
Src.remove (count);
}
count--;
}
}
}
</script>

I hope this article will help you with your JavaScript programming.