JavaScript實作將陣列資料加入Select下拉方塊的方法_javascript技巧
本文實例講述了JavaScript實作將陣列資料新增至Select下拉方塊的方法。分享給大家供大家參考。具體如下：
這裡示範將數組中的數據添加到Select下拉菜單中的效果，當你點擊下拉框的時候，就動態加載了數據，更換Select內容的時候，直接替換數組中的內容就可以了。適合前端設計者實現前台的部分本地化腳本操作。
運作效果截圖如下：
線上示範網址如下：
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>将数组中的数据添加到下拉菜单中</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程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
win11新增硬碟教學
Jan 05, 2024 am 09:39 AM
在購買電腦的時候，不一定會選擇很大的硬碟，這時候如果我們想在win11新增硬碟，可以先安裝購買的新硬碟，然後在電腦裡新增分割區就可以了。 win11新增硬碟教學：1、首先，我們拆開主機，找到硬碟的插槽。 2.找到後，我們先接上“數據線”，一般會有防呆設計，插不進去反個方向即可。 3.隨後將新的硬碟插入硬碟插槽。 4.插入後，將資料線的另一頭接到電腦的主機板上。 5.安裝完成後，就可以裝回主機，並開機了。 6.開機後，我們右鍵“此電腦”，開啟“電腦管理”7、開啟後，點選左下角的“磁碟管理”8、隨後在右邊可以
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
米家怎麼加電視
Mar 25, 2024 pm 05:00 PM
許多用戶在現代生活中越來越青睞小米智慧家庭互聯的電子生態，那麼連接米家APP後，你就可以輕鬆用手機來控制連接設備，但是很多用戶們還不知如何將自己的家居添加米家app中，那麼這篇教學攻略將為大家帶來具體連接方法步驟攻略，希望能幫助到各位有需要的小夥伴們。 1.下載米家APP後，建立或登入小米帳號。 2.添加方法：當全新的設備通電後，將手機靠近設備並打開小米電視，正常情況下會彈出連接提示，選擇“確定”即進入設備連接流程。若無提示彈出，也可以手動新增設備，方法是：進入智慧型家庭APP後，點選左下方第1
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
在MetaMask錢包中如何連接到Polygon網路？ MetaMask錢包連接到Polygon網路的教學指南
Jan 19, 2024 pm 04:36 PM
如何新增PolygonMainnet網路要將MATIC（Polygon）與Metamask連結使用，您需要新增一個名為「PolygonMainnet」的專用網路。使用錯誤的網路位址進行轉入會導致出現問題，所以在轉出$MATIC之前，請務必使用「PolygonMainnet」網路。 Metamask錢包預設連接到以太坊主網，但我們可以很簡單地添加“PolygonMainnet”並使用$MATIC。只需簡單的複製和貼上幾個步驟，就能完成。首先，在Metamask錢包中，點擊右上角的網路選項，選擇「C
Win11快速建立桌面捷徑的教學課程
Dec 27, 2023 pm 04:29 PM
在win11中，我們可以透過新增桌面捷徑的方法在桌面上快速啟動軟體或文件，而且只需要右鍵需要的文件就可以操作了。 win11新增桌面捷徑：1、開啟“此電腦”，找到你想要新增桌面捷徑的檔案或軟體。 2、找到後，右鍵選取它，點選「顯示更多選項」3、再選擇「傳送到」-「桌面捷徑」4、操作完成後，就可以在桌面上找到捷徑了。
Tampermonkey怎麼加入新腳本-Tampermonkey怎麼刪除腳本
Mar 18, 2024 pm 12:10 PM
Tampermonkey油猴Chrome擴充功能是一款使用者腳本管理插件，透過腳本提高了使用者的效率和瀏覽體驗，那麼Tampermonkey要怎麼加入新腳本呢？怎麼刪除腳本呢？下面就讓小編給大家解答吧!Tampermonkey怎麼加入新腳本：1、這裡拿GreasyFork來舉例子，打開GreasyFork網頁，輸入要按照的腳本，小編這裡選擇的一鍵離線下載2、選擇一個腳本，進入腳本頁面後可以看到安裝此腳本的按鈕3、點選安裝此腳本，來到安裝介面。這裡點擊安裝就可以了4、我們可以在以安裝的腳本中看到安裝好的一鍵
