Cet article décrit la méthode de JavaScript contrôlant deux boîtes de liste pour échanger des données à gauche et à droite. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Nous utilisons souvent cette fonction, qui peut déplacer tous les éléments de la zone de liste de gauche vers la droite, ou déplacer tous les éléments de la zone de liste droite vers la gauche, ou déplacer tous les éléments de la zone de liste droite vers la gauche, ou les déplacer immédiatement.
La copie de code est la suivante: fonction listbox_movecross (sourceId, Destid) {
var src = document.getElementById (sourceId);
var dest = document.getElementById (Destid);
pour (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;
essayer {
dest.add (NewOption, null); //Standard
Src.Remove (comte, null);
} catch (erreur) {
dest.add (NewOption); // ie seulement
Src.Remove (Count);
}
compter--;
}
}
}
// ..
listbox_movecross ('countrylist', 'selectedCountryList');
Vous trouverez ci-dessous un code d'effet de démonstration qui peut être exécuté directement dans le navigateur
Copiez le code comme suit: Cliquez sur les boutons ci-dessous pour déplacer les options sélectionnées à droite ou à gauche. <br>
<ballage>
<Tbody> <tr>
<TD>
<select id = "sourcesElect" size = "10" multiple = "">
<option valeur = "a"> afghanistan </opoption>
<Option Value = "B"> Bahamas </ Option>
<Option Value = "C"> Barbade </ Option>
<Option Value = "D"> Belgique </ Option>
<Option Value = "E"> Bhoutan </ Option>
<Option Value = "F"> Chine </ Option>
<Option Value = "G"> Croatie </ Option>
<Option Value = "H"> Danemark </ Option>
<Option Value = "I"> France </ Option>
</lect>
</td>
<TD>
<Button onClick = "ListboxMoveRoss ('SourcesElect', 'DisSelect');" >>>> </fut Button> <br>
<bouton onclick = "listboxmovecross ('destSelect', 'SourcesElect');"> <<< / bouton>
</td>
<TD>
<select id = "destSelect" size = "10" multiple = "">
<option valeur = "a"> afghanistan </opoption>
<Option Value = "B"> Bahamas </ Option>
<Option Value = "C"> Barbade </ Option>
<Option Value = "D"> Belgique </ Option>
<Option Value = "E"> Bhoutan </ Option>
<Option Value = "F"> Chine </ Option>
<Option Value = "G"> Croatie </ Option>
<Option Value = "H"> Danemark </ Option>
<Option Value = "I"> France </ Option>
</lect>
</td>
</tr>
</tbody> </pable>
<cript>
fonction listboxmovecross (sourceId, Destid) {
var src = document.getElementById (sourceId);
var dest = document.getElementById (Destid);
pour (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;
essayer {
dest.add (NewOption, null); //Standard
Src.Remove (comte, null);
} catch (erreur) {
dest.add (NewOption); // ie seulement
Src.Remove (Count);
}
compter--;
}
}
}
</cript>
J'espère que cet article sera utile à la programmation JavaScript de tous.