cari

Rumah >hujung hadapan web >tutorial js >Pelaksanaan JS bagi merentasi kod senarai juntai bawah yang menyokong kemahiran selections_javascript berbilang

Pelaksanaan JS bagi merentasi kod senarai juntai bawah yang menyokong kemahiran selections_javascript berbilang

WBOY
WBOYasal
2016-05-16 15:44:051485semak imbas

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.

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：Permainan Memanah Cupid Hari Valentine Cina_jqueryArtikel seterusnya：Permainan Memanah Cupid Hari Valentine Cina_jquery

Artikel berkaitan

Lihat lagi