整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          快速了解JavaScript選擇框操作

          HTML中使用 <select><option> 元素創建選擇框。而 <select> 元素對應的是 HTMLSelectElement 接口,<option> 元素對應的是 HTMLOptionElement 接口。這兩個接口都是通過 HTMLElement 接口從其他 HTML 元素共享所有屬性和方法。

          先從 <select> 元素對應的 HTMLSelectElement 接口開始介紹專屬的屬性和方法。

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

          下面介紹一下<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屬性根據以下規則獲取值:

          • 無選中項,<select> 元素的 value 屬性為空字符串。
          • 有一個選中項,且其 value 屬性有值,則 <select> 元素的 value 屬性的值為 <option> 元素的 value 屬性的值。
          • 有一個選中項,且其 value 屬性沒有指定值,則 <select> 元素的 value 屬性的值是 <option> 元素的 text 值。
          • 有多個選中項,則 <select> 元素的值會獲取第一個 <option> 元素的value值或 text 值。

          再介紹 <option> 元素對應的 HTMLOptionElement 接口專屬屬性和方法。

          • defaultSelected:返回 boolean 值。表示默認情況下是否被選中。
          • disabled:返回 boolean 值。表示該選項不可用,等價于 <option> 元素的 disabled 屬性的值。
          • form:返回 HTMLFormElement 值的只讀屬性。如果 <option><select> 元素的后代,表示與相應 <select> 元素的 form 值相同的值,如果不是,則為 null
          • index:返回 string 的只讀屬性。表示選項在 options 集合中的索引。
          • label:返回 string 的只讀屬性。表示 <option> 元素的標簽,等價于 <option> 元素的 label 屬性。如果未設置此屬性,則讀取該屬性將返回元素的文本內容。
          • selected:返回 boolean 值,表示當前是否選擇了該選項。
          • text:返回 string 值。表示選項的文本值。
          • value:返回 string 值。表示選項的值。等價于 <option> 元素的 value 屬性。

          這里強調一下,<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
          • text:一個可選的 string 值參數,表示該選項的文本內容。如果省略,返回空字符串。
          • value:一個可選的 string 值參數,表示該選項的值。如果省略,默認返回 text 屬性的值。
          • defaultSelected:一個可選的 boolean 值參數,表示該項是否默認選中,默認為 false。注意,即使設為 true,也不代表該項的 selected 屬性為 true
          • selected:一個可選的 boolean 值參數,表示該項是否選中。默認為 false

          來看案例:

          let newOption = new Option("Option Text", "Option Value", true);

          創建之后,需要將該實例添加到 HTML 的 <select> 元素中,這里有兩種添加方法:

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

          這里詳細介紹下 add() 方法:

          add(element: HTMLOptionElement | HTMLOptGroupElement, before?: HTMLElement | number | null): void;
          • element:一個 HTMLOptionElementHTMLOptGroupElement 元素的參數。
          • before:可選的參數,是集合中的一個元素或者類型為 number 的索引,表示在 element 參數之前插入。如果傳入的是 null 或索引不存在,新元素會添加在集合的末尾。

          如果想要符合所有瀏覽器的規范,可以傳入 undefined 作為第二個參數。

          let newOption = new Option("Option text", "Option value", true);
          selectbox.add(newOption, undefined);

          這里注意一下 defaultSelectedselected 兩個參數,有時候容易弄混。selected 屬性為 true 時,該 <option> 當前狀態處于已選擇狀態。defaultSelected 屬性為 true 時,表示 <option> 在默認情況下為已選擇狀態,但不代表 <option> 的當前狀態是已選擇狀態。當頁面重置時,selected 屬性值為 true<option> 可能會變成未選擇狀態,而 defaultSelected 屬性值為 true<option> 則一定會變成已選擇狀態。

          移除選項

          移除 <option> 元素的方法也不止一種,下面列舉的方法都可以實現:

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

          要清除選擇框的所有選項,需要迭代所有選項并逐一移除它們,如下面例子所示:

          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 頁面布局時,經常使用的表單控件,學會使用與之對應的 HTMLSelectElementHTMLOptionElement 接口中的屬性和方法會很容易的操控 <select><option> 元素。借助于 DOM 操作 <select><option> 也較為方便。

          一篇文章我們說了單行文本框和多行文本框,今天呢我們繼續看一下表單的其它控件:單選框、復選框、下拉框。

          (1)單選框和復選框

          在我們表單頁面中,經常會有選擇性別或者選擇愛好這類的內容,使用選擇框是一個好主意,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) 時,該選項被默認選中

          使用練習:

          我們創建一個表單,表單里邊包含姓別(男、女)選擇的單選框,默認選中男以及愛好(唱歌、打游戲、繪畫、旅游)選擇的多選框,默認選中唱歌。具體的代碼如下圖所示:

          在網頁中的顯示效果就如下圖所示:

          (2)下拉框

          下拉框也是我們常用的一個表單控件,多用于選擇城市地區等。

          使用語法:

          <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"。選項一,把這行復制一下,可以看多選框也輸入完了。點擊多選框,可以看到它是可以同時選擇多個項目的,這就是多選框。


          主站蜘蛛池模板: 国产精品亚洲产品一区二区三区 | 亚洲一区中文字幕在线观看| 东京热人妻无码一区二区av| 色欲AV蜜桃一区二区三| 中文字幕精品亚洲无线码一区应用| 国产乱码精品一区二区三区中| 国产亚洲一区二区在线观看| 麻豆一区二区三区蜜桃免费| 国产精品久久亚洲一区二区| 精品欧洲av无码一区二区14| 亚洲一区二区三区夜色| 成人无码AV一区二区| 久久成人国产精品一区二区| 精品无码成人片一区二区| 国产一区二区三区在线电影| 精品无码一区二区三区在线| 一区二区三区国产精品| 久久综合一区二区无码| 国产精品女同一区二区久久| 一区二区精品视频| 上原亚衣一区二区在线观看| 亚洲国产成人久久一区WWW | 女人和拘做受全程看视频日本综合a一区二区视频 | 国产精品一区二区久久精品无码 | 91精品福利一区二区| 亚洲国产日韩一区高清在线| 国产成人一区二区三区在线观看 | 白丝爆浆18禁一区二区三区 | 一区二区三区免费在线视频| 国产精品成人国产乱一区| 人妻无码一区二区三区四区| 中文字幕精品一区| 性色av一区二区三区夜夜嗨| 精品国产一区二区三区不卡 | 日本人的色道www免费一区| 视频一区二区在线播放| 亚洲熟女一区二区三区| 精品无码一区在线观看| 国内精自品线一区91| 日本免费一区二区三区最新vr| 亚洲AⅤ无码一区二区三区在线 |