recherche

Maison  >  Article  >  interface Web  >  Méthode JavaScript pour ajouter des données de tableau à la liste déroulante Select_javascript skills

Méthode JavaScript pour ajouter des données de tableau à la liste déroulante Select_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:43:432450parcourir

L'exemple de cet article décrit comment ajouter des données de tableau à la liste déroulante Sélectionner à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration de l'effet de l'ajout de données dans le tableau au menu déroulant Sélectionner. Lorsque vous cliquez sur la liste déroulante, les données sont chargées dynamiquement. Lorsque vous modifiez le contenu de la sélection, remplacez simplement le contenu dans. le tableau directement. Il convient aux concepteurs front-end pour implémenter certaines opérations de script localisées dans le front-end.

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-array-add-select-data-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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>将数组中的数据添加到下拉菜单中</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
<script type="text/javascript">
var counts;
counts=0;
arr = new Array("JavaScript与ASP","JavaScript与JSP","JavaScript与ASP.NET","JavaScript与PHP"); 
counts=arr.length;
function Myselect(){
 var i;
 for (i=0;i < counts; i++) {
 document.form1.sel.options[i] = new Option(arr[i],i);
 }
}
</script>
</head>
<body>
<table width="280" height="160" border="0" align="center" cellpadding="5" cellspacing="0">
 <tr>
 <td height="34" align="center"><span class="style1" style="font-weight:bold ">将数组中的数据添加到下拉菜单中</span></td>
 </tr>
 <tr>
 <td align="center" valign="top" bgcolor="#9ACCFF"><form name="form1">
  <table width="235" height="69" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
   <td height="21"><select name="sel" id="sel" onFocus="Myselect()">
   </select></td>
  </tr>
  <tr>
   <td height="120"> </td>
  </tr>
  </table>
 </form></td>
 </tr>
</table>
</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：Partage de code de menu dynamique pour les compétences de frappe JS effect_javascriptArticle suivant：Partage de code de menu dynamique pour les compétences de frappe JS effect_javascript

Articles Liés

Voir plus