Méthode JavaScript pour contrôler deux zones de liste pour échanger des données compétences left et right_javascript

L'exemple de cet article décrit comment JavaScript contrôle l'échange de données entre deux listbox. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Nous utilisons souvent cette fonction pour déplacer les éléments de la list box de gauche vers la droite, ou déplacer les éléments de la list box de droite vers la gauche. Vous pouvez tous les déplacer d'un coup

Copier le code Le code est le suivant :

function listbox_moveacross(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
for(var count=0; count < src.options.length; count ) {
Si(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;
                  essayez {
                                                                                                                                                                                                                        dest.add(newOption, null
);                           src.remove(count, null);
                       }attraper(erreur) {
                              dest.add(newOption); // IE uniquement
                          src.remove(count);
                 }
Compter--;
>
>
>
//..
listbox_moveacross('countryList', 'selectedCountryList');

Ce qui suit est un code d'effet de démonstration comme celui-ci, qui peut être exécuté directement dans le navigateur

Copier le code Le code est le suivant :

Cliquez ci-dessous pour déplacer les options sélectionnées vers la droite ou la gauche.



   

 Afghanistan
 Bahamas
 Barbade
 Belgique
 Bhoutan
 Chine
 Croatie
 Danemark
 France

   
   
        >> 

        <<
   
   

 Afghanistan
 Bahamas
 Barbade
 Belgique
 Bhoutan
 Chine
 Croatie
 Danemark
 France

   


    <script><br> fonction 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 />                 essayez {<br />                          dest.add(newOption, null); //Standard<br />                          src.remove(count, null);<br />                  }attraper (erreur) {<br />                          dest.add(newOption); // IE uniquement<br />                          src.remove(count);<br />                  ><br />                 compte--;<br />         ><br />     ><br /> ><br /> </script>

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