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

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

WBOY

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

original

2485 Les gens l'ont consulté

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>

Copier après la connexion

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