快捷導(dǎo)航

js操縱dom生成下拉列表框的方法

更新時間：2014年02月24日 15:14:35 作者：

這篇文章主要介紹了js操縱dom生成下拉列表框的方法,需要的朋友可以參考下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>利用dom生成下拉列表框</title> 

</head> 

<body onload="setFun()"> 
<form> 
<select name="area" id="area"> 
<option value="0">沒有地區(qū)</option> 
</select> 
</form> 
<script language="javascript"> 
function setFun(){ 
var id = new Array(1,2,3); 
var value = new Array("貴州","重慶","四川"); 
var select = document.getElementById("area"); 
select.length = 1;//設(shè)置只能選擇一個 
select.options[0].selected = true;//設(shè)置默認(rèn)選中第一個 
for(var x = 0;x<id.length;x++){ 
var option = document.createElement("option"); 
option.setAttribute("value",id[x]);//設(shè)置option屬性值 
option.appendChild(document.createTextNode(value[x])); 
select.appendChild(option);//向select增加option 
} 
} 
</script> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

跟我學(xué)習(xí)javascript的循環(huán)
跟我學(xué)習(xí)javascript的循環(huán)，本文不僅針對javascript循環(huán)進(jìn)行講解，還對prototype補充了幾點小tips，歡迎大家閱讀。
2015-11-11
js獲取字符串字節(jié)數(shù)方法小結(jié)
這篇文章主要介紹了js獲取字符串字節(jié)數(shù)方法,實例總結(jié)了javascript字符串長度計算的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
讓瀏覽器DOM元素最后加載的js方法
讓瀏覽器DOM元素最后加載的方法有很多，本例為大家介紹下，通過js如何實現(xiàn)
2014-07-07
JS動態(tài)顯示倒計時效果
這篇文章主要介紹了JS實現(xiàn)倒計時效果動態(tài)顯示倒計時功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-12-12
JS與jQuery遍歷Table所有單元格內(nèi)容的方法
這篇文章主要介紹了JS與jQuery遍歷Table所有單元格內(nèi)容的方法,結(jié)合實例形式分別描述了JavaScript與jQuery實現(xiàn)遍歷table單元格的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-12-12
HTML的select控件美化
本文主要介紹了HTML的select控件美化以及js實現(xiàn)select選擇功能的方法步驟。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
Javascript中瀏覽器窗口的基本操作總結(jié)
BOM全稱是brower object model(瀏覽器對象模型)，主要用于管理窗口及窗口間的通訊，其核心對象是window。說窗口，可能并不準(zhǔn)確。因為，有的瀏覽器窗口可能包含多個標(biāo)簽頁，每個標(biāo)簽頁都有自己的window對象。本文將詳細(xì)介紹這些內(nèi)容，有需要可以參考學(xué)習(xí)。
2016-08-08
JS實現(xiàn)微博發(fā)布功能
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)微博發(fā)布功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
詳解JavaScript中的this硬綁定
這篇文章主要為大家詳細(xì)介紹了JavaScript中的this顯示綁定和硬綁定，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，感興趣的可以了解一下
2022-10-10
JavaScript+html實現(xiàn)前端頁面隨機二維碼驗證
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實現(xiàn)前端頁面隨機二維碼驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06