Comment obtenir l'effet de déplacement des éléments dans la zone de liste déroulante avec les compétences JavaScript

Comment obtenir l'effet de déplacement des éléments dans la zone de liste déroulante avec les compétences JavaScript_javascript

WBOY

Libérer： 2016-05-16 15:13:02

original

1857 Les gens l'ont consulté

Tout d'abord, laissez-moi vous expliquer la différence entre une zone de liste déroulante et une zone de liste :

La zone de liste déroulante inclut les fonctions de zone de liste et de zone de texte

Zone de texte : seules les données peuvent être saisies

Zone de liste : seules les données peuvent être sélectionnées

Boîte combo : peut non seulement saisir des données, mais également sélectionner ``

Contexte de l'application : il y a deux zones de liste sur la page et les éléments d'une zone de liste doivent être déplacés vers l'autre zone de liste.

　 Idée de base de mise en œuvre :

(1) Écrivez la méthode init pour initialiser les deux zones de liste

(2) Ajoutez l'événement onload au corps pour appeler la méthode init
;

(3) Écrivez move(s1,s2) pour déplacer l'option sélectionnée de s1 vers s2 ;

(4) Écrivez moveAll(s1,s2) pour déplacer toutes les options de s1 vers s2.

　(5) Ajouter un événement onclick pour le bouton.

le code javascript est le suivant :

<script type="text/javascript" language="javascript">
//对下拉框信息进行初始化
function init() {
for (i = ; i < ; i++) {
var y = document.createElement("option");//增加一个元素option
y.text = '选项' + i;
var x=document.getElementById("s");//根据ID找到列表框
x.add(y, null); //
}
}
//把选中的选项移到另一边
function move(s, s) {
var index = s.selectedIndex;
if (index == -) {
alert("没有选中值");
return;
}
s.length++;
s.options[s.length - ].value = s.options[index].value;
s.options[s.length - ].text = s.options[index].text;//s中当前选中的值赋给s的最后一个元素
s.remove(index);//从s中移除当前元素
}
//把一边的完全移到另一边
function moveAll(s, s) {
if (s.length == ) {
alert("没有可用选择");
return;
}
s.length = s.length + s.length;
for (var i = ; i < s.length; i++) {
s.options[s.length - s.length + i].value = s.options[i].value;
s.options[s.length - s.length + i].text = s.options[i].text;
}
s.length = ;
}
</script>

Copier après la connexion

Code :

<body onload="init()">
<table>
<tr>
<td><select id="s" size= style="width:"></select></td>
<td><input type="button" name="moveToRight" value=">"
onClick="move(s,s)"> <br>
<br> <input type="button" name="moveAllToRight" value=">>"
onClick="moveAll(s,s)"> <br> <input type="button"
name="moveToLeft" value="<" onClick="move(s,s)"> <br>
<br> <input type="button" name="moveAllToLeft" value="<<"
onClick="moveAll(s,s)"></td>
<td><select id="s" name="s" size= style="width:"></select></td>
</tr>
</table>
</body>

Copier après la connexion

Le contenu ci-dessus vous présente la façon dont JavaScript peut réaliser l'effet de déplacement des éléments dans la zone de liste déroulante. J'espère qu'il vous sera utile !