JavaScript實現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法
更新時間：2015年08月21日 09:29:37 作者：佚名
這篇文章主要介紹了JavaScript實現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法,涉及javascript數(shù)組操作及頁面元素動態(tài)賦值的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法。分享給大家供大家參考。具體如下：
這里演示將數(shù)組中的數(shù)據(jù)添加到Select下拉菜單中的效果，當(dāng)你點(diǎn)擊下拉框的時候，就動態(tài)加載了數(shù)據(jù)，更換Select內(nèi)容的時候，直接替換數(shù)組中的內(nèi)容就可以了。適合前端設(shè)計者實現(xiàn)前臺的部分本地化腳本操作。
運(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"> </td>
</tr>
</table>
</form></td>
</tr>
</table>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要分享一段了Google Maps API地圖應(yīng)用示例，做項目中經(jīng)常會使用到，非常的簡單，有需要的朋友可以參考下2014-10-10
javascript 多種搜索引擎集成的頁面實現(xiàn)代碼
這個頁面是為了方便自己同時使用多種搜索引擎（呵呵我用其作默認(rèn)主頁），在IE5/IE6/FireFox下均運(yùn)行正常，效果如下圖2010-01-01
下面小編就為大家?guī)硪黄猨s中常用的Tab切換效果(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-08-08
本文主要介紹了JavaScript中setTimeout()的具體用法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
bootstrap modal+gridview實現(xiàn)彈出框效果
這篇文章主要介紹了bootstrap modal+gridview實現(xiàn)彈出框效果，gridview點(diǎn)擊更新彈出填寫信息表單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
一文帶你快速學(xué)會JavaScript條件判斷及高級用法
JavaScript支持其用于執(zhí)行根據(jù)不同的條件不同的操作條件語句,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中更好的使用條件判斷的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了簡單了解JS打開url的方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了原生javascript實現(xiàn)百葉窗效果的方法及原理介紹，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了利用Html+CSS+JavaScript實現(xiàn)的放煙花效果，文中一共實現(xiàn)了兩種方式：手動和自動，文中的示例代碼講解詳細(xì)，感興趣的可以試一試2022-01-01
看過很多關(guān)于js高級特性介紹的文章，本文是個人感覺最通俗易懂的，這里分享給大家，希望大家能夠喜歡2019-09-09