文章插圖
在HTML中使用 <select> 和 <option> 元素創(chuàng)建選擇框 。而 <select> 元素對(duì)應(yīng)的是 HTMLSelectElement 接口，<option> 元素對(duì)應(yīng)的是 HTMLOptionElement 接口 。這兩個(gè)接口都是通過(guò) HTMLElement 接口從其他 HTML 元素共享所有屬性和方法 。
先從 <select> 元素對(duì)應(yīng)的 HTMLSelectElement 接口開(kāi)始介紹專(zhuān)屬的屬性和方法 。

• autofocus：返回 boolean 值，表示控件在頁(yè)面加載時(shí)是否應(yīng)該具有輸入焦點(diǎn)，除非用戶覆蓋它 。等價(jià)于 <select> 元素中的 autofocus 屬性 。
• disabled： 返回 boolean 值，表示控件是否被禁用 。等價(jià)于 <select> 元素中的 disabled 屬性 。
• form：返回 HTMLFormElement 值的只讀屬性 ， 表示與此元素關(guān)聯(lián)的表單 。
• labels：與此元素關(guān)聯(lián)的 <label> 元素組成的 NodeList 。
• length：返回 number 值，表示 <select> 元素中 <option> 元素的數(shù)量 。
• multiple：返回boolean 值，表示是否允許多??，等价?lt;select> 元素中的 multiple 屬性 。
• name：返回 string 值，表示此控件的名稱(chēng) 。等價(jià)于 <select> 元素中的 name 屬性 。
• options：返回 HTMLOptionsCollection 值的可讀屬性，表示此元素包含的 <option> 元素集 。
• required：返回 boolean 值，表示用戶在提交表單之前是否需要選擇值 。等價(jià)于 <select> 元素中的 required 屬性 。
• selectedIndex：返回 number 值，表示第一個(gè)選定的 <option> 元素的索引 。值為 -1 表示未選擇任何元素 ， 對(duì)于允許多選的列表 ， 始終是第一個(gè)選項(xiàng)的索引 。
• selectedOptions：返回 HTMLCollection 值的可讀屬性 ， 表示所選的 <option> 的元素集 。
• size：返回 number 值，表示控件中可見(jiàn)項(xiàng)的數(shù)量 。等價(jià)于 <select> 元素的 size 屬性 。默認(rèn)值為 1，如果 multiple 為 true ，則為 4 。
• type：返回 string 值的只讀屬性，表示表單控件類(lèi)型 。當(dāng) multiple 為 true 時(shí)，它返回 “select-multiple”，否則返回 “select-one” 。
• validationMessage：返回 string 值的只讀屬性，表示一個(gè)本地化消息，描述了控件不滿足的驗(yàn)證約束 。如果willvalidate=false ， 或者它滿足其約束，則此屬性為空字符串 。
• validity：返回 ValidityState 的只讀屬性 ， 表示該控件所處的有效狀態(tài) 。
• value：返回 string 值，表示表單控件的值 。返回 option 元素的 value 屬性，如果沒(méi)有該屬性，則返回 text 屬性 。
• willValidate：返回 boolean 值的只讀屬性，表示該按鈕是否是約束驗(yàn)證的候選者 。如果任何條件禁止約束驗(yàn)證，則為 false 。
• add(elemen, before)：將 element 元素添加到 before 元素之前 。element 參數(shù)為要添加的 <option> 元素， before 參數(shù)為已存在的 <option> 元素，before 為可選參數(shù) 。
• checkValidity()：檢查元素是否有任何約束以及它是否滿足它們 。如果元素未通過(guò)約束，瀏覽器將在元素處觸發(fā)可取消的 invalid 事件并返回 false 。
• item(index)：從 <select>元素的 options 集合中獲取一個(gè) <option> 元素 。
• namedItem(name)：獲取具有指定名稱(chēng)的 options 集合中的 <option> 元素 。而傳入的 name 參數(shù)可以匹配 <option> 元素的 id 或 name 屬性 。
• remove(index)：從 <select> 元素的 options 集合中刪除指定索引處的元素 。
• reportValidity()：此方法向用戶報(bào)告元素約束的問(wèn)題 。如果有問(wèn)題，它會(huì)在元素處觸發(fā)可取消的 invalid 事件，并返回 false；如果沒(méi)有問(wèn)題，則返回 true 。
• setCustomValidity(error)：將 <select> 元素的自定義有效性消息設(shè)置為指定的消息 。使用空字符串表示元素不具有自定義有效性錯(cuò)誤 。

【js下拉框默認(rèn)選中某個(gè)值 js設(shè)置select選中某個(gè)值】下面介紹一下<select> 元素根據(jù)不同選中狀態(tài)下的value屬性的值：
<select name="location" id="selLocation"><option value="http://www.wokk.cn/Sunnyvale, CA">Sunnyvale</option><option value="http://www.wokk.cn/Los Angeles, CA">Los Angeles</option><option value="http://www.wokk.cn/Mountain View, CA">Mountain View</option><option value="">China</option><option>Australia</option></select>當(dāng)選中選項(xiàng)框中的第一項(xiàng)時(shí) ， <select> 元素的 value 值為 “Sunnyvale, CA”；而選中第四項(xiàng)時(shí)，<select> 元素的 value 值為 “”，因?yàn)樵擁?xiàng)的 value 屬性是空字符串；選中最后一項(xiàng)，則 value 值為 “Australia”，因?yàn)樵?<option> 元素沒(méi)有指定 value 屬性 。
因此，根據(jù)以上的例子，<select> 元素的value屬性根據(jù)以下規(guī)則獲取值：

• 無(wú)選中項(xiàng)，<select> 元素的 value 屬性為空字符串 。
• 有一個(gè)選中項(xiàng)，且其 value 屬性有值，則 <select> 元素的 value 屬性的值為 <option> 元素的 value 屬性的值 。
• 有一個(gè)選中項(xiàng)，且其 value 屬性沒(méi)有指定值，則 <select> 元素的 value 屬性的值是 <option> 元素的 text 值 。
• 有多個(gè)選中項(xiàng) ， 則 <select> 元素的值會(huì)獲取第一個(gè) <option> 元素的value值或 text 值 。

再介紹 <option> 元素對(duì)應(yīng)的 HTMLOptionElement 接口專(zhuān)屬屬性和方法 。

• defaultSelected：返回 boolean 值 。表示默認(rèn)情況下是否被選中 。
• disabled：返回 boolean 值 。表示該選項(xiàng)不可用，等價(jià)于 <option> 元素的 disabled 屬性的值 。
• form：返回 HTMLFormElement 值的只讀屬性 。如果 <option> 是 <select> 元素的后代，表示與相應(yīng) <select> 元素的 form 值相同的值，如果不是，則為 null 。
• index：返回 string 的只讀屬性 。表示選項(xiàng)在 options 集合中的索引 。
• label：返回 string 的只讀屬性 。表示 <option> 元素的標(biāo)簽 ， 等價(jià)于 <option> 元素的 label 屬性 。如果未設(shè)置此屬性 ， 則讀取該屬性將返回元素的文本內(nèi)容 。
• selected：返回 boolean 值，表示當(dāng)前是否選擇了該選項(xiàng) 。
• text：返回 string 值 。表示選項(xiàng)的文本值 。
• value：返回 string 值 。表示選項(xiàng)的值 。等價(jià)于 <option> 元素的 value 屬性 。

這里強(qiáng)調(diào)一下 ， <select> 元素的 change 事件與其它表單字段是不一樣的 。其它表單字段會(huì)在自己的值改變后觸發(fā) change 事件 ， 然后字段失去焦點(diǎn) 。而 <select> 會(huì)在選中一項(xiàng)時(shí)立即觸發(fā) change 事件 。
選項(xiàng)處理對(duì)于只允許選擇一項(xiàng)的 <select> 元素 ， 獲取選項(xiàng)最簡(jiǎn)單的方式是使用 <select> 元素的 selectIndex 屬性，如下面的例子：
let selectedOption = selectbox.options[selectbox.selectedIndex];獲取到 <option> 元素后，就可以根據(jù) <option> 元素的屬性和方法獲取想要的信息 。
對(duì)于允許多選的 <select> 元素，selectedIndex 屬性就像只允許選擇一項(xiàng)一樣 。設(shè)置 selectedIndex 會(huì)移除所有選項(xiàng)，只選擇指定的項(xiàng) ， 而獲取 selectedIndex 只會(huì)返回選中的第一項(xiàng)的索引 。
選項(xiàng)還可以通過(guò)取得選項(xiàng)的引用并將其 selected 屬性設(shè)置為 true 來(lái)選中 。例如 ， 以下代碼會(huì)選中 <select> 的第一項(xiàng)：
selectbox.options[0].selected = true;與 selectedIndex 不同，設(shè)置選項(xiàng)的 selected 屬性不會(huì)在多選時(shí)移除其他選項(xiàng)，從而可以動(dòng)態(tài)選擇任意多個(gè)選項(xiàng) 。如果修改單選框中選項(xiàng)的 selected 屬性，則其他選項(xiàng)會(huì)被移除 。要注意的是，把 selected 屬性設(shè)置為 false 對(duì)單選框沒(méi)有影響 。
通過(guò) selected 屬性可以確定選擇框中哪個(gè)選項(xiàng)被選中 。要取得所有選中項(xiàng)，需要循環(huán)選項(xiàng)集合逐一檢測(cè) selected 屬性，比如：
function getSelectedOptions(selectbox){let result = new Array();for (let option of selectbox.options) {if (option.selected) {result.push(option);}}return result;}添加選項(xiàng)可以使用 JavaScript 動(dòng)態(tài)創(chuàng)建選項(xiàng)并將它們添加到選擇框 。首先，可以使用 DOM 方法，如下所示：
let newOption = document.createElement("option");newOption.appendChild(document.createTextNode("Option text"));newOption.setAttribute("value", "Option value");selectbox.appendChild(newOption);以上代碼創(chuàng)建了一個(gè)新的<option>元素 ， 使用文本節(jié)點(diǎn)添加文本，設(shè)置其 value 屬性，然后將其添加到選擇框 。添加到選擇框之后，新選項(xiàng)會(huì)立即顯示出來(lái) 。
瀏覽器原生提供 Option() 構(gòu)造函數(shù)創(chuàng)建 HTMLOptionElement 實(shí)例：
new Option(text, value, defaultSelected, selected) : HTMLOptionElement

• text：一個(gè)可選的 string 值參數(shù)，表示該選項(xiàng)的文本內(nèi)容 。如果省略，返回空字符串 。
• value：一個(gè)可選的 string 值參數(shù)，表示該選項(xiàng)的值 。如果省略，默認(rèn)返回 text 屬性的值 。
• defaultSelected：一個(gè)可選的 boolean 值參數(shù)，表示該項(xiàng)是否默認(rèn)選中，默認(rèn)為 false 。注意，即使設(shè)為 true，也不代表該項(xiàng)的 selected 屬性為 true 。
• selected：一個(gè)可選的 boolean 值參數(shù) ， 表示該項(xiàng)是否選中 。默認(rèn)為 false 。

來(lái)看案例：
let newOption = new Option("Option Text", "Option Value", true);創(chuàng)建之后，需要將該實(shí)例添加到 HTML 的 <select> 元素中，這里有兩種添加方法：

• DOM 操作中的 appendChild() 方法 。
• HTMLSelectElement 接口中的 add() 方法 。

這里詳細(xì)介紹下 add() 方法：
add(element: HTMLOptionElement | HTMLOptGroupElement, before?: HTMLElement | number | null): void;

• element：一個(gè) HTMLOptionElement 或 HTMLOptGroupElement 元素的參數(shù) 。
• before：可選的參數(shù)，是集合中的一個(gè)元素或者類(lèi)型為 number 的索引，表示在 element 參數(shù)之前插入 。如果傳入的是 null 或索引不存在，新元素會(huì)添加在集合的末尾 。

如果想要符合所有瀏覽器的規(guī)范，可以傳入 undefined 作為第二個(gè)參數(shù) 。
let newOption = new Option("Option text", "Option value", true);selectbox.add(newOption, undefined);這里注意一下 defaultSelected 和 selected 兩個(gè)參數(shù)，有時(shí)候容易弄混 。selected 屬性為 true 時(shí) ， 該 <option> 當(dāng)前狀態(tài)處于已選擇狀態(tài) 。defaultSelected 屬性為 true 時(shí)，表示 <option> 在默認(rèn)情況下為已選擇狀態(tài)，但不代表 <option> 的當(dāng)前狀態(tài)是已選擇狀態(tài) 。當(dāng)頁(yè)面重置時(shí) ， selected 屬性值為 true 的 <option> 可能會(huì)變成未選擇狀態(tài) ， 而 defaultSelected 屬性值為 true 的 <option> 則一定會(huì)變成已選擇狀態(tài) 。
移除選項(xiàng)移除 <option> 元素的方法也不止一種 ， 下面列舉的方法都可以實(shí)現(xiàn)：

• DOM 操作中的 removeChild() 方法 。
• HTMLSelectElement 接口中的 remove() 方法 。傳入的參數(shù)為要移除的 <option> 元素的索引 。
• 直接將指定 <option> 元素賦值為 null 。如 selects.options[1] = null 。

要清除選擇框的所有選項(xiàng)，需要迭代所有選項(xiàng)并逐一移除它們，如下面例子所示：
function clearSelectbox(selectbox) {for (let index = 0; index < selectbox.options.length;) {selectbox.remove(0);}}移動(dòng)和重排選項(xiàng)使用 DOM 操作中的 appendChild() 方法實(shí)現(xiàn)從一個(gè) <select> 元素中將 <option> 移到另一個(gè) <select> 元素中，這種實(shí)現(xiàn)方法會(huì)將 <option> 元素先從其父元素中移除，然后再插入指定位置 。如下所示：
let selectbox1 = document.getElementById("selLocations1");let selectbox2 = document.getElementById("selLocations2");selecbox2.appendChild(selectbox1.options[0]);移動(dòng)選項(xiàng)和移除選項(xiàng)都會(huì)導(dǎo)致每個(gè) <option> 的 index 屬性重置 。
重排 <option> 的話，使用 DOM 操作中的 insertBefore() 方法 ， 而移到最后位置，還是使用 appendChild() 方法較為方便 。
下面的代碼演示了將一個(gè) <option> 在 <select> 中前移一個(gè)位置：
let optToMove = selectbox.options[1];selectbox.insertBefore(optToMove, selectbox.options[optionToMove.index-1]);這個(gè)例子首先獲得要移動(dòng) <option> 的索引，然后將其插入之前位于它前面的 <option> 之前，其中第二行代碼適用于除第一個(gè) <option> 之外的所有 <option> 。下面的代碼則可以將<option>向下移動(dòng)一個(gè)位置：
let optionToMove = selectbox.options[1];selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index+2]);總結(jié)<select> 和 <option> 是在 HTML 頁(yè)面布局時(shí)，經(jīng)常使用的表單控件，學(xué)會(huì)使用與之對(duì)應(yīng)的 HTMLSelectElement 和 HTMLOptionElement 接口中的屬性和方法會(huì)很容易的操控 <select> 和 <option> 元素 。借助于 DOM 操作 <select> 和 <option> 也較為方便 。

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問(wèn)題，請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專(zhuān)業(yè)人士給予相關(guān)指導(dǎo)!

「愛(ài)刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對(duì)您有所幫助：

• 制作金箔文字和邊框效果的Word封面
• 如何在WPS文字中加入一個(gè)對(duì)話框
• WPS表格自動(dòng)添加邊框設(shè)置教程
• Excel教程：如何給單元格加邊框線
• 如何處理Word表格右邊的邊框超出頁(yè)面問(wèn)題
• 如何使用福昕PDF編輯器自定義列表框
• 如何設(shè)置XML和JSP等文件永久默認(rèn)記事本打開(kāi)
• Excel下拉列表的基本操作
• 如何提高Excel表格輸入效率：利用有效性實(shí)現(xiàn)下拉框鼠標(biāo)點(diǎn)選輸入
• Excel下拉框選項(xiàng)的設(shè)置與取消