首先我們對(duì)選擇框腳本作一個(gè)基本介紹同時(shí)介紹下有那些參數(shù)。
? ? ? ?選擇框是通過(guò)和元素創(chuàng)建的。為了方便與這個(gè)控件交互，除了所有表單字段共 有的屬性和方法外，HTMLSelectElement 類(lèi)型還提供了下列屬性和方法。?
? ? ? ?add(newOption, relOption)：向控件中插入新元素，其位置在相關(guān)項(xiàng)（relOption） 之前。
? ? ? ?multiple：布爾值，表示是否允許多項(xiàng)選擇；等價(jià)于 HTML中的 multiple 特性。
? ? ? ?options：控件中所有元素的 HTMLCollection。
? ? ? ?remove(index)：移除給定位置的選項(xiàng)。
? ? ? ?selectedIndex：基于 0的選中項(xiàng)的索引，如果沒(méi)有選中項(xiàng)，則值為-1。對(duì)于支持多選的控件， 只保存選中項(xiàng)中第一項(xiàng)的索引。
? ? ? ?size：選擇框中可見(jiàn)的行數(shù)；等價(jià)于 HTML中的 size 特性。 選擇框的 type 屬性不是"select-one"，就是"select-multiple"，這取決于 HTML代碼中有 沒(méi)有 multiple 特性。選擇框的 value 屬性由當(dāng)前選中項(xiàng)決定，相應(yīng)規(guī)則如下。?
? ? ? ? 如果沒(méi)有選中的項(xiàng)，則選擇框的 value 屬性保存空字符串。
? ? ? ? 如果有一個(gè)選中項(xiàng)，而且該項(xiàng)的 value 特性已經(jīng)在 HTML中指定，則選擇框的 value 屬性等 于選中項(xiàng)的 value 特性。即使 value 特性的值是空字符串，也同樣遵循此條規(guī)則。
? ? ? ? 如果有一個(gè)選中項(xiàng)，但該項(xiàng)的 value 特性在 HTML中未指定，則選擇框的 value 屬性等于該 項(xiàng)的文本。
? ? ? ? 如果有多個(gè)選中項(xiàng)，則選擇框的 value 屬性將依據(jù)前兩條規(guī)則取得第一個(gè)選中項(xiàng)的值。 以下面的選擇框?yàn)槔?

?
? ? ? ?Sunnyvale?
? ? ? ?Los Angeles?
? ? ? ?Mountain View
? ? ? ?China Australia
?
? ? ? ?
? ? ? ?如果用戶(hù)選擇了其中第一項(xiàng)，則選擇框的值就是"Sunnyvale, CA"。如果文本為"China"的選項(xiàng) 被選中，則選擇框的值就是一個(gè)空字符串，因?yàn)槠?value 特性是空的。如果選擇了后一項(xiàng)，那么由 于中沒(méi)有指定 value 特性，則選擇框的值就是"Australia"。?
? ? ? ?在 DOM 中，每個(gè)元素都有一個(gè) HTMLOptionElement 對(duì)象表示。為便于訪(fǎng)問(wèn)數(shù)據(jù)， HTMLOptionElement 對(duì)象添加了下列屬性：?
? ? ? ? index：當(dāng)前選項(xiàng)在 options 集合中的索引。?
? ? ? ? label：當(dāng)前選項(xiàng)的標(biāo)簽；等價(jià)于 HTML中的 label 特性。?
? ? ? ? selected：布爾值，表示當(dāng)前選項(xiàng)是否被選中。將這個(gè)屬性設(shè)置為 true 可以選中當(dāng)前選項(xiàng)。 ? text：選項(xiàng)的文本。?
? ? ? ? value：選項(xiàng)的值（等價(jià)于 HTML中的 value 特性）。 其中大部分屬性的目的，都是為了方便對(duì)選項(xiàng)數(shù)據(jù)的訪(fǎng)問(wèn)。雖然也可以使用常規(guī)的 DOM功能來(lái)訪(fǎng) 問(wèn)這些信息，但效率是比較低的，如下面的例子所示：?

? ? ? ?var selectbox = document.forms[0].elements["location"];?
? ? ? ?//不推薦 var text = selectbox.options[0].firstChild.nodeValue; //選項(xiàng)的文本?
? ? ? ?var value = selectbox.options[0].getAttribute("value"); //選項(xiàng)的值?
? ? ? ?
? ? ? ?以上代碼使用標(biāo)準(zhǔn) DOM方法，取得了選擇框中第一項(xiàng)的文本和值?？梢耘c下面使用選項(xiàng)屬性的代 碼作一比較：?
? ? ? ?var selectbox = document.forms[0]. elements["location"];?

? ? ? ?//推薦?
? ? ? ?var text = selectbox.options[0].text; //選項(xiàng)的文本
? ? ? ?var value = selectbox.options[0].value; //選項(xiàng)的值
? ? ? ??
? ? ? ?在操作選項(xiàng)時(shí)，我們建議好是使用特定于選項(xiàng)的屬性，因?yàn)樗袨g覽器都支持這些屬性。在將表 單控件作為 DOM節(jié)點(diǎn)的情況下，實(shí)際的交互方式則會(huì)因?yàn)g覽器而異。我們不推薦使用標(biāo)準(zhǔn) DOM技術(shù) 修改元素的文本或者值。 最后，南昌網(wǎng)站建設(shè)公司前端開(kāi)發(fā)工程師還想提醒讀者注意一點(diǎn)：選擇框的 change 事件與其他表單字段的 change 事件觸發(fā)的 條件不一樣。其他表單字段的 change 事件是在值被修改且焦點(diǎn)離開(kāi)當(dāng)前字段時(shí)觸發(fā)，而選擇框的 change 事件只要選中了選項(xiàng)就會(huì)觸發(fā)。?
? ? ? ?
? ? ? ?不同瀏覽器下，選項(xiàng)的 value 屬性返回什么值也存在差別。但是，在所有瀏覽 器中，value 屬性始終等于 value 特性。在未指定 value 特性的情況下，IE8會(huì)返 回空字符串，而 IE9+、Safari、Firefox、Chrome和 Opera則會(huì)返回與 text 特性相同 的值。?
? ? ? ? 接下來(lái)詳細(xì)介紹選擇選項(xiàng)具體操作方法：
? ? ? ?
? ? ? ?對(duì)于只允許選擇一項(xiàng)的選擇框，訪(fǎng)問(wèn)選中項(xiàng)的簡(jiǎn)單方式，就是使用選擇框的 selectedIndex 屬 性，如下面的例子所示：?
? ? ? ?var selectedOption = selectbox.options[selectbox.selectedIndex];?
? ? ? ?取得選中項(xiàng)之后，可以像下面這樣顯示該選項(xiàng)的信息：?
? ? ? ?var selectedIndex = selectbox.selectedIndex;?
? ? ? ?var selectedOption = selectbox.options[selectedIndex];?
? ? ? ?alert("Selected index: " + selectedIndex + "nSelected text: " + selectedOption.text + "nSelected value: " + selectedOption.value);?


? ? ? ?這里，南昌網(wǎng)絡(luò)公司前端開(kāi)發(fā)工程師通過(guò)一個(gè)警告框顯示了選中項(xiàng)的索引、文本和值。?
? ? ? ?對(duì)于可以選擇多項(xiàng)的選擇框，selectedfIndex 屬性就好像只允許選擇一項(xiàng)一樣。設(shè)置 selectedIndex 會(huì)導(dǎo)致取消以前的所有選項(xiàng)并選擇指定的那一項(xiàng)，而讀取 selectedIndex 則只會(huì)返 回選中項(xiàng)中第一項(xiàng)的索引值。?
? ? ? ?另一種選擇選項(xiàng)的方式，就是取得對(duì)某一項(xiàng)的引用，然后將其 selected 屬性設(shè)置為 true。例如， 下面的代碼會(huì)選中選擇框中的第一項(xiàng)：?

? ? ? ?selectbox.options[0].selected = true; ? ? ??
? ? ? ?與selectedIndex 不同，在允許多選的選擇框中設(shè)置選項(xiàng)的 selected 屬性，不會(huì)取消對(duì)其他選中項(xiàng) 的選擇，因而可以動(dòng)態(tài)選中任意多個(gè)項(xiàng)。但是，如果是在單選選擇框中，修改某個(gè)選項(xiàng)的 selected 屬性則 會(huì)取消對(duì)其他選項(xiàng)的選擇。需要注意的是，將 selected 屬性設(shè)置為 false 對(duì)單選選擇框沒(méi)有影響。?
? ? ? ?實(shí)際上，selected 屬性的作用主要是確定用戶(hù)選擇了選擇框中的哪一項(xiàng)。要取得所有選中的項(xiàng)， 可以循環(huán)遍歷選項(xiàng)集合，然后測(cè)試每個(gè)選項(xiàng)的 selected 屬性。來(lái)看下面的例子。?
? ? ? ?function getSelectedOptions(selectbox){?
? ? ? ?var result = new Array();?
? ? ? ?var option = null;?

for (var i=0, len=selectbox.options.length; i < len; i++){?
? ? ? ? ? ? ? option = selectbox.options[i];?
? ? ? ? ? ? ? if (option.selected){
? ? ? ? ? ? ? ?result.push(option);?
? ? ? ? ? ? ? }
? ? ? ? }?
? ? ? ?return result;
? ? ? ? }
? ? ? ?這個(gè)函數(shù)可以返回給定選擇框中選中項(xiàng)的一個(gè)數(shù)組。首先，創(chuàng)建一個(gè)將包含選中項(xiàng)的數(shù)組，然后使 用 for 循環(huán)迭代所有選項(xiàng)，同時(shí)檢測(cè)每一項(xiàng)的 selected 屬性。如果有選項(xiàng)被選中，則將其添加到 result 數(shù)組中。后，返回包含選中項(xiàng)的數(shù)組。下面是一個(gè)使用 getSelectedOptions()函數(shù)取得 選中項(xiàng)的示例。?
? ? ? ?var selectbox = document.getElementById("selLocation");?
? ? ? ?var selectedOptions = getSelectedOptions(selectbox);
? ? ? ?var message = "";?

for (var i=0, len=selectedOptions.length; i < len; i++){
? ? ? ? message += "Selected index: " + selectedOptions[i].index + "nSelected text: " + selectedOptions[i].text + "nSelected value: " + selectedOptions[i].value + "nn"; }?
alert(message);?
? ? ? ?在這個(gè)例子中，我們首先從一個(gè)選擇框中取得了選中項(xiàng)。然后，使用 for 循環(huán)構(gòu)建了一條消息，包 含所有選中項(xiàng)的信息：每一項(xiàng)的索引、文本和值。這種技術(shù)適用于單選和多選選擇框。?
? ? ? ?實(shí)例完整代碼如下：



? ? ? ?
? ? ? ?

?
? ? ? ?

? ? ? ? ? ? ? Where do you want to live?
? ? ?
? ? ? ? ? ? ? Sunnyvale
? ? ? ? ? ? ? Los Angeles
? ? ? ? ? ? ? Mountain View
? ? ? ? ? ? ? China
? ? ? ? ? ? ? Australia
? ? ? ?
? ? ? ?

? ? ? ?

? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ?

?



? ?本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌APP開(kāi)發(fā)公司-百恒網(wǎng)絡(luò) http://www.gimmickmag.com/ 如轉(zhuǎn)載請(qǐng)注明出處!