Heim > Artikel > Web-Frontend > So erzielen Sie mit JavaScript_Javascript-Kenntnissen den Bewegungseffekt von Elementen im Kombinationslistenfeld

So erzielen Sie mit JavaScript_Javascript-Kenntnissen den Bewegungseffekt von Elementen im Kombinationslistenfeld

WBOYOriginal: 2016-05-16 15:13:021805Durchsuche

Lassen Sie mich zunächst den Unterschied zwischen Kombinationsfeld und Listenfeld erklären:

Das Kombinationsfeld enthält die Funktionen eines Listenfelds und eines Textfelds

Textfeld: Es können nur Daten eingegeben werden

Listenfeld: Es können nur Daten ausgewählt werden

Kombinationsfeld: Sie können nicht nur Daten eingeben, sondern auch „

“ auswählen

Anwendungshintergrund: Es gibt zwei Listenfelder auf der Seite und die Elemente eines Listenfelds müssen in das andere Listenfeld verschoben werden.

　 Grundidee der Umsetzung:

(1) Schreiben Sie die Init-Methode, um die beiden Listenfelder zu initialisieren;

(2) Fügen Sie das Onload-Ereignis zum Text hinzu, um die Init-Methode aufzurufen

(3) Schreiben Sie move(s1,s2), um die ausgewählte Option in s1 nach s2 zu verschieben;

(4) Schreiben Sie moveAll(s1,s2), um alle Optionen in s1 nach s2 zu verschieben.

　(5) Onclick-Ereignis für Schaltfläche hinzufügen.

Der Javascript-Code lautet wie folgt:

<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>

6c04bd5ca3fcae76e30b72ad730ca86dCode:

<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>

Der obige Inhalt führt Sie in das Wissen ein, wie JavaScript den Bewegungseffekt von Elementen im Kombinationslistenfeld realisieren kann. Ich hoffe, er wird Ihnen hilfreich sein!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Die Implementierung von Shutter-Animationseffekten auf Basis von JavaScript ist nicht nur mit einfachen flas_javascript-Kenntnissen möglichNächster Artikel：Die Implementierung von Shutter-Animationseffekten auf Basis von JavaScript ist nicht nur mit einfachen flas_javascript-Kenntnissen möglich

In Verbindung stehende Artikel

Mehr sehen