選擇框是通過<select>和<option>元素創建的,除了通用的一些屬性外,HTMLSelectElement類型還提供了如下的屬性和方法:


在DOM中,每個<option>元素都有一個HTMLOptionElement對象,以便訪問數據,這個對象有如下一些屬性:




選擇框里的type屬性有可能是:select-one,也有可能是:select-multiple,這取決于HTML代碼中有沒有multiple屬性。


操作select時,最好使用HTML DOM,因為所有瀏覽器兼容很好。
當選擇沒有value值的時候,IE會返回空字符串,其他瀏覽器會返回text值。
選擇選項:
對于只能選擇一項的選擇框,使用selectedIndex屬性最為簡單。


如果是多項選擇,它始終返回的是第一個項。


通過option的屬性(布爾值),也可以設置某個索引,設置為true即可。


而selected和selectedIndex在用途上最大的區別是:selected是返回布爾值,所以一般用于判斷上;而selectedIndex是數值,一般用于設置和獲取。


添加選項:
需要動態添加選項有兩種方案:DOM和Option構造函數。


使用Option構造函數創建:


使用add()方法來添加選項:


在DOM規定,add()中兩個參數是必須的,如果不確定索引,那么第二個參數設置null即可,即默認移入最后一個選項。但IE中規定第二個參數是可選的,所以設置null表示放入不存在的位置,導致失效,為了兼容,我們傳遞undefined即可兼容。


移出選項:
有三種方法可以移出某一個選項:DOM移出、remove()、null移出。


當第一項移出后,下面的項會往上頂,所以不停的移除第一項,即可全部移除。
移動選項:
如果有兩個選擇框,把第一個選擇框里的第一項移到第二個選擇框里,并且第一個選擇框里的第一項被移出。


排列選項:
選擇框里提供了一個index屬性,可以得到當前選項的索引值,和selectedIndex的區別是,一個是選擇框對象的調用,一個選項對象的調用。


單選按鈕:
通過checked屬性來獲取單選按鈕的值。


除了checked屬性之外,單選按鈕還有一個defaultChecked屬性,它獲取的是原本的checked按鈕對象,而不會因為checked的改變而改變。


復選框按鈕:
通過checked屬性來獲取復選框按鈕的值。它同樣也具有defaultChecked屬性。


版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。