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 相关文章推荐
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
You might like
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
Python读取图片为16进制表示简单代码
2018/01/19 Python
python构建深度神经网络(续)
2018/03/10 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
政法大学毕业生自荐信范文
2014/01/01 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
公务员政审材料
2014/12/23 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS