So erzielen Sie mit JavaScript_Javascript-Kenntnissen den Bewegungseffekt von Elementen im Kombinationslistenfeld-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:13:02

Original

1804 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!