suchen

Heim >Web-Frontend >js-Tutorial >JavaScript-Methode zum Hinzufügen von Array-Daten zur Dropdown-Liste „box_javascript skills'.

JavaScript-Methode zum Hinzufügen von Array-Daten zur Dropdown-Liste „box_javascript skills'.

WBOY
WBOYOriginal
2016-05-16 15:43:432480Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie mithilfe von JavaScript Array-Daten zum Dropdown-Feld „Auswählen“ hinzufügen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration der Auswirkung des Hinzufügens von Daten im Array zum Dropdown-Menü „Auswählen“. Wenn Sie auf das Dropdown-Menü klicken, werden die Daten dynamisch geladen. Wenn Sie den Inhalt ändern, ersetzen Sie einfach den Inhalt das Array direkt. Es eignet sich für Front-End-Designer, um einige lokalisierte Skriptvorgänge im Front-End zu implementieren.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-array-add-select-data-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>
<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>

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：Dynamisches Menü-Code-Sharing für JS-Eingabeeffekt_Javascript-KenntnisseNächster Artikel：Dynamisches Menü-Code-Sharing für JS-Eingabeeffekt_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen