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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
npm的lock机制解析
Jun 20 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
Memcache 在PHP中的使用技巧
2010/02/08 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP中overload与override的区别
2017/02/13 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
Django接受前端数据的几种方法总结
2016/11/04 Python
在python中pandas的series合并方法
2018/11/12 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Django 再谈一谈json序列化
2020/03/16 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
浅析Python中字符串的intern机制
2020/10/03 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
一岗双责责任书
2014/04/15 职场文书
环境卫生倡议书
2014/08/29 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
费用申请报告范文
2015/05/15 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python