js中confirm自定義按鈕文字「js彈出選擇對話框」

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

JavaScript的表單處理(二)選擇框及單複選按鈕

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

JavaScript的表單處理(二)選擇框及單複選按鈕
JavaScript的表單處理(二)選擇框及單複選按鈕

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

JavaScript的表單處理(二)選擇框及單複選按鈕

操作select時,最好使用HTML DOM,因為所有瀏覽器兼容很好。

當選擇沒有value值的時候,IE會返回空字符串,其他瀏覽器會返回text值。

選擇選項:

對於只能選擇一項的選擇框,使用selectedIndex屬性最為簡單。

JavaScript的表單處理(二)選擇框及單複選按鈕

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

JavaScript的表單處理(二)選擇框及單複選按鈕

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

JavaScript的表單處理(二)選擇框及單複選按鈕

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

JavaScript的表單處理(二)選擇框及單複選按鈕

添加選項:

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

JavaScript的表單處理(二)選擇框及單複選按鈕

使用Option構造函數創建:

JavaScript的表單處理(二)選擇框及單複選按鈕

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

JavaScript的表單處理(二)選擇框及單複選按鈕

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

JavaScript的表單處理(二)選擇框及單複選按鈕

移出選項:

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

JavaScript的表單處理(二)選擇框及單複選按鈕

當第一項移出後,下面的項會往上頂,所以不停的移除第一項,即可全部移除。

移動選項:

如果有兩個選擇框,把第一個選擇框里的第一項移到第二個選擇框里,並且第一個選擇框里的第一項被移出。

JavaScript的表單處理(二)選擇框及單複選按鈕

排列選項:

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

JavaScript的表單處理(二)選擇框及單複選按鈕

單選按鈕:

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

JavaScript的表單處理(二)選擇框及單複選按鈕

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

JavaScript的表單處理(二)選擇框及單複選按鈕

複選框按鈕:

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

JavaScript的表單處理(二)選擇框及單複選按鈕

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/269573.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-16 13:17
下一篇 2024-12-16 13:17

相關推薦

發表回復

登錄後才能評論