HTML中使用 <select> 和 <option> 元素創建選擇框。而 <select> 元素對應的是 HTMLSelectElement 接口,<option> 元素對應的是 HTMLOptionElement 接口。這兩個接口都是通過 HTMLElement 接口從其他 HTML 元素共享所有屬性和方法。
先從 <select> 元素對應的 HTMLSelectElement 接口開始介紹專屬的屬性和方法。
下面介紹一下<select> 元素根據不同選中狀態下的value屬性的值:
<select name="location" id="selLocation">
<option value="Sunnyvale, CA">Sunnyvale</option>
<option value="Los Angeles, CA">Los Angeles</option>
<option value="Mountain View, CA">Mountain View</option>
<option value="">China</option>
<option>Australia</option>
</select>
當選中選項框中的第一項時,<select> 元素的 value 值為 "Sunnyvale, CA";而選中第四項時,<select> 元素的 value 值為 "",因為該項的 value 屬性是空字符串;選中最后一項,則 value 值為 "Australia",因為該 <option> 元素沒有指定 value 屬性。
因此,根據以上的例子,<select> 元素的value屬性根據以下規則獲取值:
再介紹 <option> 元素對應的 HTMLOptionElement 接口專屬屬性和方法。
這里強調一下,<select> 元素的 change 事件與其它表單字段是不一樣的。其它表單字段會在自己的值改變后觸發 change 事件,然后字段失去焦點。而 <select> 會在選中一項時立即觸發 change 事件。
對于只允許選擇一項的 <select> 元素,獲取選項最簡單的方式是使用 <select> 元素的 selectIndex 屬性,如下面的例子:
let selectedOption = selectbox.options[selectbox.selectedIndex];
獲取到 <option> 元素后,就可以根據 <option> 元素的屬性和方法獲取想要的信息。
對于允許多選的 <select> 元素,selectedIndex 屬性就像只允許選擇一項一樣。設置 selectedIndex 會移除所有選項,只選擇指定的項,而獲取 selectedIndex 只會返回選中的第一項的索引。
選項還可以通過取得選項的引用并將其 selected 屬性設置為 true 來選中。例如,以下代碼會選中 <select> 的第一項:
selectbox.options[0].selected = true;
與 selectedIndex 不同,設置選項的 selected 屬性不會在多選時移除其他選項,從而可以動態選擇任意多個選項。如果修改單選框中選項的 selected 屬性,則其他選項會被移除。要注意的是,把 selected 屬性設置為 false 對單選框沒有影響。
通過 selected 屬性可以確定選擇框中哪個選項被選中。要取得所有選中項,需要循環選項集合逐一檢測 selected 屬性,比如:
function getSelectedOptions(selectbox){
let result = new Array();
for (let option of selectbox.options) {
if (option.selected) {
result.push(option);
}
}
return result;
}
可以使用 JavaScript 動態創建選項并將它們添加到選擇框。首先,可以使用 DOM 方法,如下所示:
let newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);
以上代碼創建了一個新的<option>元素,使用文本節點添加文本,設置其 value 屬性,然后將其添加到選擇框。添加到選擇框之后,新選項會立即顯示出來。
瀏覽器原生提供 Option() 構造函數創建 HTMLOptionElement 實例:
new Option(text, value, defaultSelected, selected) : HTMLOptionElement
來看案例:
let newOption = new Option("Option Text", "Option Value", true);
創建之后,需要將該實例添加到 HTML 的 <select> 元素中,這里有兩種添加方法:
這里詳細介紹下 add() 方法:
add(element: HTMLOptionElement | HTMLOptGroupElement, before?: HTMLElement | number | null): void;
如果想要符合所有瀏覽器的規范,可以傳入 undefined 作為第二個參數。
let newOption = new Option("Option text", "Option value", true);
selectbox.add(newOption, undefined);
這里注意一下 defaultSelected 和 selected 兩個參數,有時候容易弄混。selected 屬性為 true 時,該 <option> 當前狀態處于已選擇狀態。defaultSelected 屬性為 true 時,表示 <option> 在默認情況下為已選擇狀態,但不代表 <option> 的當前狀態是已選擇狀態。當頁面重置時,selected 屬性值為 true 的 <option> 可能會變成未選擇狀態,而 defaultSelected 屬性值為 true 的 <option> 則一定會變成已選擇狀態。
移除 <option> 元素的方法也不止一種,下面列舉的方法都可以實現:
要清除選擇框的所有選項,需要迭代所有選項并逐一移除它們,如下面例子所示:
function clearSelectbox(selectbox) {
for (let index = 0; index < selectbox.options.length;) {
selectbox.remove(0);
}
}
使用 DOM 操作中的 appendChild() 方法實現從一個 <select> 元素中將 <option> 移到另一個 <select> 元素中,這種實現方法會將 <option> 元素先從其父元素中移除,然后再插入指定位置。如下所示:
let selectbox1 = document.getElementById("selLocations1");
let selectbox2 = document.getElementById("selLocations2");
selecbox2.appendChild(selectbox1.options[0]);
移動選項和移除選項都會導致每個 <option> 的 index 屬性重置。
重排 <option> 的話,使用 DOM 操作中的 insertBefore() 方法,而移到最后位置,還是使用 appendChild() 方法較為方便。
下面的代碼演示了將一個 <option> 在 <select> 中前移一個位置:
let optToMove = selectbox.options[1];
selectbox.insertBefore(optToMove, selectbox.options[optionToMove.index-1]);
這個例子首先獲得要移動 <option> 的索引,然后將其插入之前位于它前面的 <option> 之前,其中第二行代碼適用于除第一個 <option> 之外的所有 <option>。下面的代碼則可以將<option>向下移動一個位置:
let optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,
selectbox.options[optionToMove.index+2]);
<select> 和 <option> 是在 HTML 頁面布局時,經常使用的表單控件,學會使用與之對應的 HTMLSelectElement 和 HTMLOptionElement 接口中的屬性和方法會很容易的操控 <select> 和 <option> 元素。借助于 DOM 操作 <select> 和 <option> 也較為方便。
一篇文章我們說了單行文本框和多行文本框,今天呢我們繼續看一下表單的其它控件:單選框、復選框、下拉框。
在我們表單頁面中,經常會有選擇性別或者選擇愛好這類的內容,使用選擇框是一個好主意,html中有兩種選擇框,即單選框和復選框,兩者的區別是單選框中的選項用戶只能選擇一項,而復選框中用戶可以任意選擇多項,甚至全選。
使用語法:
單選框:<input type="radio" value="值" name="名稱" checked="checked"/>
復選框:<input type="checkbox" value="值" name="名稱" checked="checked"/>
詳細講解:
1、type: 當 type="radio" 時,控件為單選框;當 type="checkbox" 時,控件為復選框
2、value:提交數據到服務器的值(后臺程序使用)
3、name:為控件命名,這里要注意同一組的單選按鈕,name 取值一定要一致(具體可見下邊的參考練習)。
4、checked:當設置 checked="checked"(也可以直接簡寫成checked) 時,該選項被默認選中
使用練習:
我們創建一個表單,表單里邊包含姓別(男、女)選擇的單選框,默認選中男以及愛好(唱歌、打游戲、繪畫、旅游)選擇的多選框,默認選中唱歌。具體的代碼如下圖所示:
在網頁中的顯示效果就如下圖所示:
下拉框也是我們常用的一個表單控件,多用于選擇城市地區等。
使用語法:
<select>
<option value="向服務器提交的內容" selected="selected">網頁顯示的內容</option>
</select>
詳細講解:
1、option:option為select下拉子元素,可以有一個或多個,寫法類似ul和li,其中的value內容為提交數據到服務器的值(后臺程序使用)
2、selected:當設置 selected="selected"(也可以直接簡寫成selected) 時,該選項被默認選中
使用練習:
我們創建一個表單,表單里邊包含一個城市的下拉框,下拉框中有北京、上海、天津這三個城市,其中默認選中天津。具體的代碼如下圖所示:
在網頁中的顯示效果就如下圖所示:
好了,本篇文章就先給大家介紹這幾個表單控件的語法以及使用,下篇文章我們將介紹按鈕的語法及使用以及完整的表單練習演示,記得平時要多加練習才是王道。
每日金句:做人要像竹子一樣每前進一步,都要做一次小結。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。
eb前端開發課程:html表單-單選框多選框。
講課人:波波老師。
radio單選框、checkbox多選框,這兩個只需要選擇不需要輸入。現在來看一下單選框和多選框的演示。
·首先是單選框,輸入一個inputradio,可以看到默認給了兩個屬性:name和id。把name="radio",id="radio1"。當然光一個單選框也沒有用,還需要給它加一個label,for-"radio1",這個4abel for="">。這里要放上前面這個(單選框的id)"radio1",代表著這是它的label。
·這里輸入一個單選選項一,可以看到點擊單選選項一,同時也可以把radio選中,這就是label的作用。多復制幾個,可以看到選擇"選項一"它被選中了,選擇選項二,選項二被選中的時候,選項一的選中狀態就被去掉了,它們三個只能選中一個,這就叫單選框。它們是以什么為同組標準的?就是以name為同組標準。
·假設現在再建一個單選框<input>,選擇name="radioradio",id"radio4",label for="radio4"。單選選項4,選擇1234,選4的時候對前面三個選項不產生影響,這就是單選框。
·接著再來看多選框,多選框,input:checkbox,4abel for="checkbox1"。選項一,把這行復制一下,可以看多選框也輸入完了。點擊多選框,可以看到它是可以同時選擇多個項目的,這就是多選框。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。