Implémentation JS du code de liste déroulante traversante qui prend en charge plusieurs compétences Selections

Implémentation JS du code de liste déroulante traversante qui prend en charge plusieurs compétences Selections_Javascript

WBOY

Libérer： 2016-05-16 15:44:05

original

1473 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation JS du parcours d'une liste déroulante prenant en charge plusieurs sélections. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

JS est utilisé ici pour implémenter une liste déroulante avec plusieurs sélections. Cliquez sur n'importe quelle valeur dans la liste déroulante supérieure avec la souris, et la valeur sélectionnée sera affichée dans la liste inférieure. le clavier et cliquez à nouveau sur n'importe quelle valeur dans la liste supérieure, vous pouvez effectuer des sélections multiples. La fonction multi-sélection bénéficie de l'aide de JavaScript. Ce type d'application est assez courant sur les pages Web. .

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

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

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.