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


Posted in Javascript onAugust 21, 2015

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

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

运行效果截图如下:

JavaScript实现将数组数据添加到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 相关文章推荐
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
vue获取dom元素注意事项
Dec 28 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 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
You might like
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
javascript中 try catch用法
2015/08/16 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
python访问sqlserver示例
2014/02/10 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
python数据爬下来保存的位置
2020/02/17 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
离婚协议书格式
2015/01/26 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
vue3中provide && inject的使用
2021/07/01 Vue.js
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技