js-Methode zum Verschieben von Elementen nach oben und unten in Select list

js-Methode zum Verschieben von Elementen nach oben und unten in Select list_javascript skills

WBOY

Freigeben： 2016-05-16 15:45:03

Original

1605 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie Sie mit js Elemente in der Auswahlliste nach oben und unten verschieben. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist der Js-Code zum Auf- und Abbewegen von Elementen in der Auswahlliste, der von Hand sortiert werden kann. Wir haben ihn alle schon einmal gesehen und Freunde, die sich mit WEB-Programmierung beschäftigen, verwenden ihn oft.

Der Betriebseffekt ist wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-select-move-up-down-codes/

Der spezifische Code lautet wie folgt:

<html>
<head>
<title>Select列表各项上移和下移</title>
<script>
function move(index,to) {
var list = document.form.list;
var total = list.options.length-1;
if (index == -1) return false;
if (to == +1 && index == total) return false;
if (to == -1 && index == 0) return false;
var items = new Array;
var values = new Array;
for (i = total; i >= 0; i--) {
items[i] = list.options[i].text;
values[i] = list.options[i].value;
}
for (i = total; i >= 0; i--) {
if (index == i) {
list.options[i + to] = new Option(items[i],values[i + to], 0, 1);
list.options[i] = new Option(items[i + to], values[i]);
i--;
}
else {
list.options[i] = new Option(items[i], values[i]);
  }
}
list.focus();
}
function submitForm() {
var list = document.form.list;
var theList = "&#63;";
for (i = 0; i <= list.options.length-1; i++) { 
theList += "list" + list.options[i].value + "=" + list.options[i].text;
if (i != list.options.length-1) theList += "&";
}
location.href = document.form.action + theList;
}
</script>
</head>
<body>
<form method="GET" action="" name="form">
<table>
<tr>
<td align="middle">
<select name="list" size="4">
<option value="1">ASP</option>
<option value="2">PHP</option>
<option value="3">JSP</option>
<option value="4">JAVA</option>
</select><br><br>
<input type="button" value="submit" onClick="submitForm()">
</td>
<td valign="top">
<input type="button" value="↑" 
onClick="move(this.form.list.selectedIndex,-1)"><br><br>
<input type="button" value="↓"
onClick="move(this.form.list.selectedIndex,+1)">
</td>
</tr>
</table>
</form>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.