Home >Web Front-end >JS Tutorial >JavaScript method to add array data to Select drop-down box_javascript skills

JavaScript method to add array data to Select drop-down box_javascript skills

WBOYOriginal: 2016-05-16 15:43:432480browse

The example in this article describes how to add array data to the Select drop-down box using JavaScript. Share it with everyone for your reference. The details are as follows:

Here is a demonstration of the effect of adding data in the array to the Select drop-down menu. When you click the drop-down box, the data is dynamically loaded. When changing the Select content, just replace the content in the array directly. It is suitable for front-end designers to implement some localized script operations in the front-end.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-array-add-select-data-codes/

The specific code is as follows:

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

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Dynamic menu code sharing for JS typing effect_javascript skillsNext article：Dynamic menu code sharing for JS typing effect_javascript skills

See more

JavaScript method to add array data to Select drop-down box_javascript skills

Related articles