编程 Javascript

JavaScript实现将数组数据添加到Select下拉框的方法

Posted in Javascript onAugust 21, 2015

本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法。分享给大家供大家参考。具体如下：

这里演示将数组中的数据添加到Select下拉菜单中的效果，当你点击下拉框的时候，就动态加载了数据，更换Select内容的时候，直接替换数组中的内容就可以了。适合前端设计者实现前台的部分本地化脚本操作。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

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

希望本文所述对大家的javascript程序设计有所帮助。

JavaScript实现将数组数据添加到Select下拉框的方法

- Author -

佚名

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

又一个图片自动缩小的JS代码

Mar 10 Javascript

Array.prototype 的泛型应用分析

Apr 30 Javascript

jQuery1.3.2 升级到jQuery1.4.4需要修改的地方

Jan 06 Javascript

js select option对象小结

Dec 20 Javascript

一个JavaScript递归实现反转数组字符串的实例

Oct 14 Javascript

Javascript模拟加速运动与减速运动代码分享

Dec 11 Javascript

js实现点击按钮后给Div图层设置随机背景颜色的方法

May 06 Javascript

AngularJS中的过滤器使用详解

Jun 16 Javascript

原生js实现图片层叠轮播切换效果

Feb 02 Javascript

JS变量及其作用域

Mar 29 Javascript

详解html-webpack-plugin插件(用法总结)

Sep 12 Javascript

JavaScript中的函数式编程详解

Aug 22 Javascript

情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)

Aug 21 #Javascript

jquery带翻页动画的电子杂志代码分享

Aug 21 #Javascript

jQuery实现的产品自动360度旋转展示特效源码分享

Aug 21 #Javascript

纯javascript实现图片延时加载方法

Aug 21 #Javascript

jQuery实现大转盘抽奖活动仿QQ音乐代码分享

Aug 21 #Javascript

js变形金刚文字特效代码分享

Aug 20 #Javascript

js限制文本框的输入内容代码分享（3类）

Aug 20 #Javascript