This article describes the method of JavaScript controlling two listboxes to exchange data left and right. Share it for your reference. The specific analysis is as follows:
We often use this function, which can move all the elements of the left list box to the right, or move all the elements of the right list box to the left, or move all the elements of the right list box to the left, or move them at once.
The code copy is as follows: function listbox_movecross(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_movecross('countryList', 'selectedCountryList');
Below is a demo effect code that can be executed directly in the browser
Copy the code as follows: Click below buttons to move selected options right or left.<br>
<table>
<tbody><tr>
<td>
<select id="sourceSelect" size="10" 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="listboxMovecross('sourceSelect', 'destSelect');">>>></button> <br>
<button onclick="listboxMovecross('destSelect', 'sourceSelect');"><<</button>
</td>
<td>
<select id="destSelect" size="10" 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 listboxMovecross(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 be helpful to everyone's JavaScript programming.