JavaScript method to control two listboxes to exchange data left and right_javascript skills

The example in this article describes how JavaScript controls the exchange of data between two listboxes. Share it with everyone for your reference. The specific analysis is as follows:

We often use this function to move the elements of the left list box to the right, or move the elements of the right list box to the left. You can move them all at once

Copy code The code is 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');

The following is a demonstration effect code like this, which can be executed directly in the browser

Copy code The code is as follows:

Click below buttons to move selected options right or left.



   
   
   

Afghanistan  Bahamas  Barbados  Belgium  Bhutan  China  Croatia  Denmark  France

>>          <<

Afghanistan  Bahamas  Barbados  Belgium  Bhutan  China  Croatia  Denmark  France

    <script><br> function listboxMoveacross(sourceID, destID) {<br>     var src = document.getElementById(sourceID);<br>     var dest = document.getElementById(destID);<br>     for(var count=0; count < src.options.length; count ) {<br />         if(src.options[count].selected == true) {<br />                 var option = src.options[count];<br />                 var newOption = document.createElement("option");<br />                 newOption.value = option.value;<br />                 newOption.text = option.text;<br />                 newOption.selected = true;<br />                 try {<br />                          dest.add(newOption, null); //Standard<br />                          src.remove(count, null);<br />                  }catch(error) {<br />                          dest.add(newOption); // IE only<br />                          src.remove(count);<br />                  }<br />                 count--;<br />         }<br />     }<br /> }<br /> </script>

希望本文所述对大家的javascript程序设计有所帮助。