recherche

Maison >interface Web >js tutoriel >Implémentation JS du code de liste déroulante traversante qui prend en charge plusieurs compétences Selections_Javascript

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

WBOY
WBOYoriginal
2016-05-16 15:44:051485parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tir à l'arc Cupidon chinois pour la Saint-Valentin Game_jqueryArticle suivant：Tir à l'arc Cupidon chinois pour la Saint-Valentin Game_jquery

Articles Liés

Voir plus