HTML select option基礎(chǔ)理解及使用

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁制作

來源：易賢網(wǎng) 閱讀：1534 次日期：2016-06-21 11:29:51

溫馨提示：易賢網(wǎng)小編為您整理了“HTML select option基礎(chǔ)理解及使用”,方便廣大網(wǎng)友查閱！

本文將闡述下HTML select option基礎(chǔ)（options[ ]數(shù)組的屬性、option的方法）及應(yīng)用介紹，感興趣的朋友可以參考下哈，希望對你有所幫助

javascript之HTML（select option）詳解

一、基礎(chǔ)理解:

代碼如下:

var e = document.getElementById("selectId");

e. options= new Option("文本","值") ;

//創(chuàng)建一個option對象,即在<select>標簽中創(chuàng)建一個或多個<option value="值">文本</option>

//options是個數(shù)組,里面可以存放多個<option value="值">文本</option>這樣的標簽

1:options[ ]數(shù)組的屬性:

length屬性---------長度屬性

selectedIndex屬性--------當(dāng)前被選中的框中的文本的索引值,此索引值是內(nèi)存自動分配的(0,1,2,3.....)對應(yīng)(第一個文本值,第二個文本值,第三個文本值,第四個文本值..........)

2:單個option的屬性(---obj.options[obj.selecedIndex]是指定的某個<option>標簽,是一個---)

text屬性---------返回/指定文本

value屬性------返回/指定值，與<options value="...">一致。

index屬性-------返回下標,

selected 屬性-------返回/指定該對象是否被選中.通過指定 true 或者 false，可以動態(tài)的改變選中項

defaultSelected 屬性-----返回該對象默認是否被選中。true / false。

3:option的方法

增加一個<option>標簽-----obj.options.add(new("文本","值"));<增>

刪除一個<option>標簽-----obj.options.remove(obj.selectedIndex)<刪>

獲得一個<option>標簽的文本-----obj.options[obj.selectedIndex].text<查>

修改一個<option>標簽的值-----obj.options[obj.selectedIndex]=new Option("新文本","新值")<改>

刪除所有<option>標簽-----obj.options.length = 0

獲得一個<option>標簽的值-----obj.options[obj.selectedIndex].value

注意:

a:上面的寫的是如這樣類型的方法obj.options.function()而不寫obj.funciton,是因為為了考慮在IE和FF 下的兼容,如obj.add()只能在IE中有效.

b:obj.option中的option不需要大寫,new Option中的Option需要大寫

二、應(yīng)用

代碼如下:

<html>

<head>

function number(){

var obj = document.getElementById("mySelect");

//obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在當(dāng)前選中的那個的值中改變

//obj.options.add(new Option("我的吃吃","4"));再添加一個option

//alert(obj.selectedIndex);//顯示序號，option自己設(shè)置的

//obj.options[obj.selectedIndex].text = "我的吃吃";更改值

//obj.remove(obj.selectedIndex);刪除功能

}

</script>

</head>

<body>

</select>

</body>

</html>

1.動態(tài)創(chuàng)建select

代碼如下:

function createSelect(){

var mySelect = document.createElement("select");

mySelect.id = "mySelect";

document.body.appendChild(mySelect);

}

2.添加選項option

代碼如下:

function addOption(){

//根據(jù)id查找對象，

var obj=document.getElementById('mySelect');

//添加一個選項

obj.add(new Option("文本","值")); //這個只能在IE中有效

obj.options.add(new Option("text","value")); //這個兼容IE與firefox

}

3.刪除所有選項option

代碼如下:

function removeAll(){

var obj=document.getElementById('mySelect');

obj.options.length=0;

}

4.刪除一個選項option

代碼如下:

function removeOne(){

var obj=document.getElementById('mySelect');

//index,要刪除選項的序號，這里取當(dāng)前選中選項的序號

var index=obj.selectedIndex;

obj.options.remove(index);

}

5.獲得選項option的值

代碼如下:

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序號，取當(dāng)前選中選項的序號

var val = obj.options[index].value;

6.獲得選項option的文本

代碼如下:

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序號，取當(dāng)前選中選項的序號

var val = obj.options[index].text;

7.修改選項option

代碼如下:

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序號，取當(dāng)前選中選項的序號

var val = obj.options[index]=new Option("新文本","新值");

8.刪除select

代碼如下:

function removeSelect(){

var mySelect = document.getElementById("mySelect");

mySelect.parentNode.removeChild(mySelect);

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<head>

function $(id)

{

return document.getElementById(id)

}

function show()

{

var selectObj=$("area")

var myOption=document.createElement("option")

myOption.setAttribute("value","10")

myOption.appendChild(document.createTextNode("上海"))

var myOption1=document.createElement("option")

myOption1.setAttribute("value","100")

myOption1.appendChild(document.createTextNode("南京"))

selectObj.appendChild(myOption)

selectObj.appendChild(myOption1)

}

function choice()

{

var index=$("area").selectedIndex;

var val=$("area").options[index].getAttribute("value")

if(val==10)

{

var i=$("context").childNodes.length-1;

var remobj=$("context").childNodes[i];

remobj.removeNode(true)

var sh=document.createElement("select")

sh.add(new Option("浦東新區(qū)","101"))

sh.add(new Option("黃浦區(qū)","102"))

sh.add(new Option("徐匯區(qū)","103"))

sh.add(new Option("普陀區(qū)","104"))

$("context").appendChild(sh)

}

if(val==100)

{

var i=$("context").childNodes.length-1;

var remobj=$("context").childNodes[i];

remobj.removeNode(true)

var nj=document.createElement("select")

nj.add(new Option("玄武區(qū)","201"))

nj.add(new Option("白下區(qū)","202"))

nj.add(new Option("下關(guān)區(qū)","203"))

nj.add(new Option("棲霞區(qū)","204"))

$("context").appendChild(nj)

}

function calc()

{

var x=$("context").childNodes.length-1;

alert(x)

}

function remove()

{

var i=$("context").childNodes.length-1;

var remobj=$("context").childNodes[i];

remobj.removeNode(true)

}

</script>

<body>

<select id="area" on

change="choice()">

</select>

</div>

</body>

</html>

根據(jù)這些東西,自己用JQEURY AJAX+JSON實現(xiàn)了一個小功能如下:

JS代碼:(只取了于SELECT相關(guān)的代碼)

代碼如下:

/**

* @description 構(gòu)件聯(lián)動下拉列表 (用JQUERY 的AJAX配合JSON實現(xiàn))

* @prarm selectId 下拉列表的ID

* @prarm method 要調(diào)用的方法名稱

* @prarm temp 此處存放軟件ID

* @prarm url 要跳轉(zhuǎn)的地址

function linkAgeJson(selectId,method,temp,url){

$j.ajax({

type: "get",//使用get方法訪問后臺

dataType: "json",//返回json格式的數(shù)據(jù)

url: url,//要訪問的后臺地址

data: "method=" + method+"&temp="+temp,//要發(fā)送的數(shù)據(jù)

success: function(msg){//msg為返回的數(shù)據(jù)，在這里做數(shù)據(jù)綁定

var data = msg.lists;

coverJsonToHtml(selectId,data);

}

});

}

/**

* @description 將JSON數(shù)據(jù)轉(zhuǎn)換成HTML數(shù)據(jù)格式

* @prarm selectId 下拉列表的ID

* @prarm nodeArray 返回的JSON數(shù)組

function coverJsonToHtml(selectId,nodeArray){

//get select

var tempSelect=$j("#"+selectId);

//clear select value

isClearSelect(selectId,'0');

var tempOption=null;

for(var i=0;i<nodeArray.length;i++){

//create select Option

tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');

//put Option to select

tempSelect.append(tempOption);

}

// 獲取退化構(gòu)件列表

getCpgjThgl(selectId,'thgjDm');

}

/**

* @description 清空下拉列表的值

* @prarm selectId 下拉列表的ID

* @prarm index 開始清空的下標位置

function isClearSelect(selectId,index){

var length=document.getElementById(selectId).options.length;

while(length!=index){

//長度是在變化的，因為必須重新獲取

length=document.getElementById(selectId).options.length;

for(var i=index;i<length;i++)

document.getElementById(selectId).options.remove(i);

length=length/2;

}

/**

* @description 獲取退化構(gòu)件列表

* @prarm selectId1 引用軟件下拉列表的ID

* @prarm selectId2 退化構(gòu)件下拉列表的ID

function getCpgjThgl(selectId1,selectId2){

var obj1=document.getElementById(selectId1);//引用軟件下拉列表

var obj2=document.getElementById(selectId2);//退化構(gòu)件下拉列表

var len=obj1.options.length;

//當(dāng)引用軟件列表長度等于1時返回，不做操作

if(len==1){

return false;

}

//清空下拉列表的值，兩種方式都可以

// isClearSelect(selectId2,'1');

document.getElementById(selectId2).length=1;

for(var i=0;i<len; i++){

var option= obj1.options[i];

//引用軟件被選中項不加入

if(i!=obj1.selectedIndex){

//克隆OPTION并添加到SELECT中

obj2.appendChild(option.cloneNode(true));

}

HTML代碼:

代碼如下:

<tr>

<input type="button" class="Search_button_select"

onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="選擇...">

</td>

</tr>

<tr>

</select>

</td>

</tr>

<tr>

</select>

</td>

</tr>

</TABLE>

更多信息請查看網(wǎng)頁制作

上一篇：html固定標題列、標題頭table具體實現(xiàn)代碼

下一篇：如何實現(xiàn)框架窗口間的關(guān)聯(lián)及超鏈接的target屬性的使用

易賢網(wǎng)手機網(wǎng)站地址：HTML select option基礎(chǔ)理解及使用

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關(guān)閱讀網(wǎng)頁制作

使用CSS制作立體導(dǎo)航欄10月30日

用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭10月30日

有關(guān)HTML5中背景音樂的自動播放功能10月30日

HTML5、Select下拉框右邊加圖標的實現(xiàn)代碼(增進用戶體驗)10月30日

html5實現(xiàn)圖片轉(zhuǎn)圈的動畫效果——讓頁面動起來10月30日

html5清空畫布方法(三種)10月30日

HTML實現(xiàn)移動端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務(wù)器10月30日

Dreamweaver怎么設(shè)計彩色邊框的表格?10月30日

Dreamweaver怎么給個人簡歷添加照片并排版?10月30日

基于HTML5的WebGL實現(xiàn)json和echarts圖表展現(xiàn)在同一個界面10月30日

解決HTML5手機端頁面縮放的問題10月30日

利用純CSS實現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁排版09月29日

HTML5+CSS3 實現(xiàn)靈動的動畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動畫技巧與細節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報班

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合