cari

Rumah >hujung hadapan web >tutorial js >js untuk mengalihkan item ke atas dan ke bawah dalam Pilih kemahiran list_javascript

js untuk mengalihkan item ke atas dan ke bawah dalam Pilih kemahiran list_javascript

WBOY
WBOYasal
2016-05-16 15:45:031597semak imbas

Contoh dalam artikel ini menerangkan cara menggunakan js untuk mengalihkan item ke atas dan ke bawah dalam senarai Pilih. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah kod Js untuk mengalihkan item ke atas dan ke bawah dalam senarai Pilih, yang boleh diisih menggunakan tangan Kita semua pernah melihatnya sebelum ini, dan rakan-rakan yang terlibat dalam pengaturcaraan WEB sering menggunakannya.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk melaksanakan pengesanan borang dan gesaan borang dalam kemahiran js_javascriptArtikel seterusnya：Bagaimana untuk melaksanakan pengesanan borang dan gesaan borang dalam kemahiran js_javascript

Artikel berkaitan

Lihat lagi