快捷導(dǎo)航

JavaScript實(shí)現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法

更新時(shí)間：2015年08月21日 09:29:37 作者：佚名

這篇文章主要介紹了JavaScript實(shí)現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法,涉及javascript數(shù)組操作及頁(yè)面元素動(dòng)態(tài)賦值的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法。分享給大家供大家參考。具體如下：

這里演示將數(shù)組中的數(shù)據(jù)添加到Select下拉菜單中的效果，當(dāng)你點(diǎn)擊下拉框的時(shí)候，就動(dòng)態(tài)加載了數(shù)據(jù)，更換Select內(nèi)容的時(shí)候，直接替換數(shù)組中的內(nèi)容就可以了。適合前端設(shè)計(jì)者實(shí)現(xiàn)前臺(tái)的部分本地化腳本操作。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-array-add-select-data-codes/

具體代碼如下：

<!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>將數(shù)組中的數(shù)據(jù)添加到下拉菜單中</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 ">將數(shù)組中的數(shù)據(jù)添加到下拉菜單中</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">&nbsp;</td>
  </tr>
  </table>
 </form></td>
 </tr>
</table>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Google Maps API地圖應(yīng)用示例分享
這篇文章主要分享一段了Google Maps API地圖應(yīng)用示例，做項(xiàng)目中經(jīng)常會(huì)使用到，非常的簡(jiǎn)單，有需要的朋友可以參考下
2014-10-10
javascript 多種搜索引擎集成的頁(yè)面實(shí)現(xiàn)代碼
這個(gè)頁(yè)面是為了方便自己同時(shí)使用多種搜索引擎（呵呵我用其作默認(rèn)主頁(yè)），在IE5/IE6/FireFox下均運(yùn)行正常，效果如下圖
2010-01-01
js中常用的Tab切換效果(推薦)
下面小編就為大家?guī)?lái)一篇js中常用的Tab切換效果(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦
2016-08-08
JavaScript中setTimeout()的具體用法
本文主要介紹了JavaScript中setTimeout()的具體用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
bootstrap modal+gridview實(shí)現(xiàn)彈出框效果
這篇文章主要介紹了bootstrap modal+gridview實(shí)現(xiàn)彈出框效果，gridview點(diǎn)擊更新彈出填寫信息表單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
一文帶你快速學(xué)會(huì)JavaScript條件判斷及高級(jí)用法
JavaScript支持其用于執(zhí)行根據(jù)不同的條件不同的操作條件語(yǔ)句,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中更好的使用條件判斷的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
簡(jiǎn)單了解JS打開url的方法
這篇文章主要介紹了簡(jiǎn)單了解JS打開url的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
原生js實(shí)現(xiàn)百葉窗效果及原理介紹
這篇文章主要介紹了原生javascript實(shí)現(xiàn)百葉窗效果的方法及原理介紹，感興趣的小伙伴們可以參考一下
2016-04-04
基于Html+CSS+JS實(shí)現(xiàn)手動(dòng)放煙花效果
這篇文章主要介紹了利用Html+CSS+JavaScript實(shí)現(xiàn)的放煙花效果，文中一共實(shí)現(xiàn)了兩種方式：手動(dòng)和自動(dòng)，文中的示例代碼講解詳細(xì)，感興趣的可以試一試
2022-01-01
簡(jiǎn)單談?wù)刯avascript高級(jí)特性
看過(guò)很多關(guān)于js高級(jí)特性介紹的文章，本文是個(gè)人感覺最通俗易懂的，這里分享給大家，希望大家能夠喜歡
2019-09-09