Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan pergerakan elemen dalam kotak senarai kombo dengan kemahiran JavaScript_javascript

Bagaimana untuk mencapai kesan pergerakan elemen dalam kotak senarai kombo dengan kemahiran JavaScript_javascript

WBOYasal: 2016-05-16 15:13:021805semak imbas

Pertama sekali, izinkan saya memberitahu anda perbezaan antara kotak kombo dan kotak senarai:

Kombo kombo termasuk fungsi kotak senarai dan kotak teks

Kotak teks: hanya data boleh dimasukkan

Kotak senarai: hanya data boleh dipilih

Kotak kombo: bukan sahaja boleh memasukkan data, tetapi juga memilih ``

Latar belakang aplikasi: Terdapat dua kotak senarai pada halaman dan unsur-unsur satu kotak senarai perlu dialihkan ke kotak senarai yang lain.

　 Idea asas pelaksanaan:

(1) Tulis kaedah init untuk memulakan dua kotak senarai;

(2) Tambahkan acara onload pada badan untuk memanggil kaedah init;

(3) Tulis gerakan(s1,s2) untuk mengalihkan pilihan yang dipilih dalam s1 ke s2;

(4) Tulis moveAll(s1,s2) untuk mengalihkan semua pilihan dalam s1 ke s2.

　(5) Tambah acara onclick untuk butang.

kod javascript adalah seperti berikut:

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

3c30aa6c4c72dd8ead30672a51b803a7Kod:

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

Kandungan di atas memperkenalkan anda kepada pengetahuan tentang cara JavaScript dapat merealisasikan kesan bergerak unsur dalam kotak senarai kombo saya harap ia akan membantu anda!

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：Melaksanakan kesan animasi pengatup berdasarkan JavaScript bukan sahaja boleh dilakukan dengan kemahiran flas_javascript yang mudahArtikel seterusnya：Melaksanakan kesan animasi pengatup berdasarkan JavaScript bukan sahaja boleh dilakukan dengan kemahiran flas_javascript yang mudah

Artikel berkaitan

Lihat lagi