编程 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 相关文章推荐

Struts2的s:radio标签使用及用jquery添加change事件

Apr 08 Javascript

js 数组操作之pop,push,unshift,splice,shift

Jan 29 Javascript

浅谈javascript中return语句

Jul 15 Javascript

跟我学习javascript的隐式强制转换

Nov 16 Javascript

深入分析jQuery的ready函数是如何工作的(工作原理)

Dec 17 Javascript

使用three.js 画渐变的直线

Jun 05 Javascript

JS实现的系统调色板完整实例

Dec 21 Javascript

jQuery实现动态添加、删除按钮及input输入框的方法

Apr 27 jQuery

解决VUE框架导致绑定事件的阻止冒泡失效问题

Feb 24 Javascript

js动态设置select下拉菜单的默认选中项实例

Aug 21 Javascript

vue2之简易的pc端短信验证码的问题及处理方法

Jun 03 Javascript

Vue.js如何使用Socket.IO的示例代码

Sep 05 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