Rumah >hujung hadapan web >tutorial js >Pelaksanaan JS bagi merentasi kod senarai juntai bawah yang menyokong kemahiran selections_javascript berbilang
Contoh dalam artikel ini menerangkan pelaksanaan JS melintasi senarai juntai bawah yang menyokong berbilang pilihan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
JS digunakan di sini untuk melaksanakan senarai juntai bawah dengan berbilang pilihan Klik mana-mana nilai dalam senarai juntai bawah dengan tetikus, dan nilai yang dipilih akan dipaparkan dalam senarai bawah papan kekunci dan klik mana-mana nilai dalam senarai atas sekali lagi, anda boleh melakukan pelbagai pilihan Fungsi pilihan berbilang mendapat manfaat daripada bantuan JavaScript. Ia adalah perlu untuk melihat .
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-select-option-cha-codes/
Kod khusus adalah seperti berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>遍历多选择下拉列表</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> .wenbenkuang { font-family: "宋体"; font-size: 9pt; color: #333333; border: 1px solid #999999; } </style> </head> <body style="font-size:12px"> <form name="form1" method="post" action=""> <table width="300" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#FFCC00"> <tr> <td height="22" align="left" bgcolor="#FFFFFF">可以进行多项选择的下拉列表:</td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><select name="mcusep" size="4" multiple class="wenbenkuang" onchange="updateorder()"> <option value="JavaScript程序设计">JavaScript程序设计</option> <option value="JavaScript经典教程">JavaScript经典教程</option> <option value="JavaScript范例宝典">JavaScript范例宝典</option> <option value="JavaScript与CSS样式">JavaScript与CSS样式</option> <option value="JavaScript与HTML">JavaScript与HTML</option> </select></td> </tr> <tr> <td height="22" align="left" background="images/bg.gif" bgcolor="#FFFFFF">显示所选内容:</td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><textarea name="textarea" cols="40" rows="6" class="wenbenkuang"></textarea></td> </tr> </table> </form> <script language="javascript"> function updateorder() { var orderstring=""; var n=document.form1.mcusep.length; for (i=0;i<n;++i) { if (document.form1.mcusep.options[i].selected) { orderstring+=document.form1.mcusep.options[i].value+"\n"; } } document.form1.textarea.value=orderstring; } </script> </body> </html>
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.