suchen

Heim >Web-Frontend >js-Tutorial >JS-Implementierung des durchlaufenden Dropdown-Listencodes, der mehrere Auswahlmöglichkeiten unterstützt_Javascript-Fähigkeiten

JS-Implementierung des durchlaufenden Dropdown-Listencodes, der mehrere Auswahlmöglichkeiten unterstützt_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:44:051488Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung des Durchlaufens einer Dropdown-Liste, die Mehrfachauswahl unterstützt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JS wird hier verwendet, um eine Dropdown-Liste mit Mehrfachauswahl zu implementieren. Klicken Sie mit der Maus auf einen beliebigen Wert in der oberen Dropdown-Liste, und der ausgewählte Wert wird in der unteren Liste angezeigt Klicken Sie auf die Tastatur und klicken Sie erneut auf einen beliebigen Wert. Die Mehrfachauswahlfunktion ist auf Webseiten durchaus üblich .

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-select-option-cha-codes/

Der spezifische Code lautet wie folgt: 

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

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Chinesisches Valentinstag-Amor-Bogenschießen-Spiel_jqueryNächster Artikel：Chinesisches Valentinstag-Amor-Bogenschießen-Spiel_jquery

In Verbindung stehende Artikel

Mehr sehen