JavaScript動態(tài)網(wǎng)頁設計 課件 8-3 表單下拉框

項目8.3表單下拉框主講：***2024年1月2日JavaScript動態(tài)網(wǎng)頁設計1子項目表單下拉框2024年1月2日JavaScript動態(tài)網(wǎng)頁設計2學習任務

任務1下拉框標簽與屬性

任務2訪問下拉框中的選項

任務3下拉框選項的動態(tài)操作任務4案例

2024年1月2日JavaScript動態(tài)網(wǎng)頁設計3任務1下拉框標簽與屬性 <select>標簽：表示下拉框。

<option>標簽：表示下拉框選中的選項。表單下拉框下拉框是由兩個標簽<select>和<option>組成的表單元素：格式：<selectid="**"name="**"…>

<optionvalue="**">**1</option>

<optionvalue="**">**2</option>…</select>2024年1月2日JavaScript動態(tài)網(wǎng)頁設計4例如：<selectid="color1"name="color"><optionvalue="c1">紅色</option><optionvalue="c2">綠色</option><optionvalue="c3">藍色</option></select>結(jié)果為：一個有紅色、綠色和藍色三種顏色可選擇的下拉框。如下圖所示：2024年1月2日JavaScript動態(tài)網(wǎng)頁設計5表單下拉框下拉框和下拉框選項的一些常用屬性如下：（1） value：指定下拉框選項的值。（2） text：指定下拉框的文本值，即在下拉框中顯示的文本值。（3） type：指定下拉框的類型是單選，還是多選。（4） selected：聲明選項是否被選中，選中值為true,否則為false。（5） selectedIndex：聲明被選中的選項的索引號。從0開始計數(shù)，若選項沒有被選中則該屬性值為-1。（6） options：下拉框選項<option>的數(shù)組。（7） length：下拉框選項數(shù)組的長度，即下拉框選項的個數(shù)。（8） multiple：指定下拉框為多項選擇。返回2024年1月2日JavaScript動態(tài)網(wǎng)頁設計61、訪問下拉框中的單項選項首先來了解下拉框的以下兩屬性：（1）selectIndex這個屬性為被選中的索引號（索引號從0開始），根據(jù)以上顏色的下拉框，當紅色被選中時，selectIndex為0；綠色被選中時，selectIndex為1；藍色被選中時，selectIndex為2。（2）options這個屬性是下拉框選項數(shù)組。存放的是下拉框顯示的標簽值。根據(jù)以上顏色的下拉框，options[0]為“紅色”；options[1]為“綠色”；options[2]為“藍色”。任務2訪問下拉框的選項

2024年1月2日JavaScript動態(tài)網(wǎng)頁設計7根據(jù)以上兩屬性的性質(zhì)，訪問下拉框的選中項可以使用下面語法格式：var[下拉框?qū)ο骫=document.[表單名].[下拉框名];vari=[下拉框?qū)ο骫.selectedIndex;vars=[下拉框?qū)ο骫.options[i].text;例如：表單name屬性值為fm，下拉框name屬性為color。訪問的代碼如下：varsel=document.fm.color;vari=sel.selectedIndex;vars=sel.options[i].text;最后，i為選中的第幾項，s為選中的顯示標簽。范例8-16：訪問下拉框的選項。2024年1月2日JavaScript動態(tài)網(wǎng)頁設計82、訪問下拉框中的多項選項下拉框常用的是單項選擇，但也可以進行多項選擇，當按下Ctrl鍵后便可以進行多項選擇。對多項選擇的下拉框?qū)傩栽O置有兩個主要屬性： multiple：指定下拉框為多項選擇，值為multiple。

style：指定下拉框的類型。其值為框的高度，例如：height:100px。另外，多項選擇還要用到的一個屬性是selected。selected屬性是當被選中時，其值為true。訪問下拉框的多項選擇時，使用下面語法格式：2024年1月2日JavaScript動態(tài)網(wǎng)頁設計9

<scriptlanguage="javascript">var[下拉框?qū)ο骫=document.[表單名].[下拉菜單名];varresults="";for(i=0;i<[下拉框?qū)ο骫.options.length;i++){if([下拉框?qū)ο骫.options[i].selected){results+=[下拉框?qū)ο骫.options[i].text+""; }}</script><selectid="selc"name="color"style="height:100px"multiple="multiple">…</select>2024年1月2日JavaScript動態(tài)網(wǎng)頁設計10

利用對數(shù)組options的遍歷，并通過selected的值來判斷是否被選中。被選中的顯示標簽值記錄在results變量中。范例8-17：訪問下拉框的多項選項。返回例如：表單name屬性值為fm，下拉框name屬性為color。訪問的代碼如下：varsel=document.fm.color;varresults="";for(i=0;i<sel.options.length;i++){if(sel.options[i].selected){results+=sel.options[i].text+"，"; }}最后，results記錄下被選中的所有顯示標簽，各顯示標簽用分號分隔。2024年1月2日JavaScript動態(tài)網(wǎng)頁設計11任務3下拉框選項的動態(tài)操作在一些網(wǎng)站開發(fā)中，有時需要更改下拉框中的選項內(nèi)容，也就要求能動態(tài)的操作下拉框的選項，如添加選項、替換和刪除選項等。2024年1月2日JavaScript動態(tài)網(wǎng)頁設計121、添加選項操作var[選項對象]=newOption([添加的顯示文本],[添加的選項名]);document.[表單名].[下拉框名].add([選項對象]);例如：表單name屬性值為fm，下拉框name屬性為color。添加一種黃色選項的代碼如下：語法格式：varop=newOption("黃色","c4");document.fm.color.add(op);結(jié)果將會在下拉框中新一個“黃色”選項。2024年1月2日JavaScript動態(tài)網(wǎng)頁設計132、刪除選項操作var[下拉框?qū)ο骫=document.getElementById([下拉框ID]);[下拉框?qū)ο骫.remove([下拉框?qū)ο骫.selectedIndex);例如：下拉框id屬性為selc。如果是要刪除被選中的項，selectedIndex是選中的索引號，可用如下語句：varsel=document.getElementById("selc");sel.remove(sel.selectedIndex);結(jié)果將刪除在下拉框中實現(xiàn)選中的項。如果是排列在后面的選項或者全部刪除，還可以利用下拉框長度.length來處理刪除操作。例如：varsel=document.getElementById("selc");sel.length=1;刪除下拉框中除第一項外的所有項，全部刪除=0。2024年1月2日JavaScript動態(tài)網(wǎng)頁設計143、替換選項操作var[下拉框?qū)ο骫=document.[表單名].[下拉菜單名];var[選項對象]=newOption([添加的顯示文本],[添加的選項名]);[下拉框?qū)ο骫.options[index]=[選項對象];例如：表單name屬性值為fm，下拉框name屬性為color。替換第2項的代碼如下：操作方法是先添加一個選項，然后把新添加的選項賦值給要替換的選項。語法如下：范例8-18：對下拉框選項的動態(tài)操作。varindex=2;varcol=document.fm.color;varop=newOptio