整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、下拉框操作
實現效果如下：
完整源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<select name="scolor" id="scolor">
<option value="0">==請選擇==</option>
<option value="red">==紅色==</option>
<option value="green">==綠色==</option>
<option value="blue">==藍色==</option>
</select>
<br />
<input type="button" value="添加一個選擇" onclick="Test1();" />
<input type="button" value="獲取選中項的索引" onclick="Test2();" />
<input type="button" value="獲取選中項的文本" onclick="Test3();" />
<input type="button" value="獲取選中項的值" onclick="Test4();" />
<input type="button" value="刪除選中項" onclick="Test5();" />
<input type="button" value="讓指定的項被選中" onclick="Test6();" />
<input type="button" value="修改選中項" onclick="Test7();" />
<input type="button" value="清空項" onclick="Test8();" />
</body>
<script language="javascript" type="text/javascript">
function Test1(){
var scolor=document.getElementById("scolor");
scolor.options.add(new Option("黃色"));//選項的文本和值是一樣
//第二種方式
scolor.options.add(new Option("橙色","orange"));//添加指定文本和值的選項
//作業：再添加一個選項，要求是第2個選項，第二個選項變為最后一個
}
function Test2(){
var scolor=document.getElementById("scolor");
alert(scolor.selectedIndex);
}
function Test3(){
var scolor=document.getElementById("scolor");
alert(scolor.options[scolor.selectedIndex].text);
}
function Test4(){
var scolor=document.getElementById("scolor");
//alert(scolor.options[scolor.selectedIndex].value);
alert(scolor.value);
}
function Test5(){
var scolor=document.getElementById("scolor");
scolor.options.remove(scolor.selectedIndex);
}
function Test6(){
var scolor=document.getElementById("scolor");
//scolor.selectedIndex=2;//控制索引
scolor.value="green";//控制值
}
function Test7(){
var scolor=document.getElementById("scolor");
scolor.options[scolor.selectedIndex]=new Option("羞羞色","yellowyellow");
}
function Test8(){
var scolor=document.getElementById("scolor");
/*
for(var i=0;i<scolor.options.length;i++){
scolor.options.remove(i);
}
remove只能刪除一次，無法刪除多個，使用循環也不行，原因是從0索引開始刪除，沒刪除一個索引會產生變化，那么倒序從后往前刪除即可。這里再提供一個簡單的辦法
*/
scolor.options.length=0;
}
</script>
</html>
題目只能有30個字，不能寫全，其實今天我們要學習的內容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數據集表單。
開始學習吧！
前天和昨天我們在《HTML表單元素初識1——零基礎自學網頁制作》和《HTML表單元素初識2——零基礎自學網頁制作》中基本上把<input/>標簽的type屬性里不同的值進行了講解與實踐，今天我們來學習其他包含在<form></form>之間的元素。
帶有下拉列表的表單
我們在一些網站填寫注冊信息時，經常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在于不會出現拼寫錯誤。例如：
寫這個功能我們需要介紹一組新標簽<select></select>。"select"（選擇）。在這個標簽中再添加<option></option>。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：
<select><option></option></select>這段代碼我們繼續在昨天的"表單.html"文件中添加即可，在<input type="image" src="img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標簽！
下面我們為多選表單添加名稱，示例代碼如下：
請選擇省份<select><option></option></select>下面我們添加不同選項，示例代碼如下：
請選擇省份
<select >
<option >河北</option>
<option >山東</option>
<option >河南</option>
<option >海南</option>
<option >江蘇</option>
<option >安徽</option>
</select>
<br><br>為了規范起見，我們為表單信息添加name和value屬性，示例代碼如下：
請選擇省份
<select name="province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan">河南</option>
<option value="Hainan">海南</option>
<option value="Jiangsu">江蘇</option>
<option value="Anhui">安徽</option>
</select>
<br><br>大家要注意的是，在下拉列表表單中，name寫在<select>中，value寫在<option>中。
頁面效果如下：
這里告訴大家一個規律，下拉列表表單默認顯示第一個<option></option>中的文字內容。
如果您想改變這個默認顯示，請在需要顯示的<option>中添加selected屬性，并賦值為"selected"。
示例代碼如下：
請選擇省份
<select name="province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan" selected="selected">河南</option>
<!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>頁面效果如圖：
多行文字輸入表單
我們在西瓜視頻上發布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這么短的單行輸入框。
而是多行輸入框，如圖：
使用<textarea></textarea>標簽即可添加這樣的輸入框，不過要設置row（列）和cols（行）屬性的數值。示例代碼如下：
<br>請簡要描述您的劇本的情節<br><textarea row="3" cols="20"></textarea><br>這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標簽。
下面我們為這個多行輸入框添加一些提示和限制。
首先，添加提示文字，和type="text"的<input/>標簽一樣，都是使用placeholder屬性。
第二，我們限制一下字數，使用maxlength（最大長度）屬性。
第三，在頁面加載完成后，直接讓光標停留在輸入框中，使用autofocus屬性。
下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性?。?/p>
<br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>頁面效果如圖：
如果刷新頁面不能正確顯示，請嘗試關閉后重新打開！
數據集表單
數據集表單實際上就是一個將不同選項或信息打包上傳的設置。
當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。（W3school）
這個數據集有三個部分組成，首先是<fliedset></fliedset>,這個標簽不會顯示，只是告訴瀏覽器這里的數據要打包。
第二是<legend></legend>,"legend"(說明)，這里添加數據集名稱。
第三就是我們之前學到的那些標簽了。
示例代碼如下：
<fliedset> <legend>信息打包</legend> </fliedset>下面我們使用這段代碼把form2打包一下吧。示例代碼如下：
<form>
<fieldset><!--開始-->
<legend>信息打包</legend><br>
<!--標題-->興趣愛好：<br>
<input type="checkbox" name="hobby" value="reading"/>讀書
<input type="checkbox" name="hobby" value="film"/>電影
<input type="checkbox" name="hobby" value="painting"/>繪畫
<input type="checkbox" name="hobby" value="music"/>音樂
<br>
最高學歷：<br>
<input type="radio" name="education" value="highSchool"/>高中
<input type="radio" name="education" value="bachelor"/>本科
<input type="radio" name="education" value="master"/>碩士
<input type="radio" name="education" value="doctor"/>博士
<br>
請選擇省份
<select name="province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan" selected="selected">河南</option><!--選中這個選項-->
<option value="Hainan">海南</option>
<option value="Jiangsu">江蘇</option>
<option value="Anhui">安徽</option>
</select>
<br><br><br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
<br>
</fieldset><!--結尾-->
<input type="image" src="img/示例圖片/submit.jpg"/><br>
<input type="reset" /><br>
<input type="submit" value="submit"/>
</form>頁面效果如下：
今天的內容結束了！
如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
下拉框是網頁表單中常見的元素之一，通常用于選擇不同的選項。對于我們的自動化測試工作來說，操作下拉框是我們經常需要處理的元素，selenium作為我們最常使用的web自動化測試框架，也是支持我們對下拉框進行操作的。本文我們就來介紹一下selenium如何對下拉框進行處理。
常見的下拉框類型如下圖，我們就來介紹一下如何使用selenium來對下拉框進行處理。
我們需要先安裝好selenium并且配置好瀏覽器驅動，比如chromedriver或者geckodriver等，并配置好瀏覽器驅動的環境變量。這里我們不做贅述，selenium環境配置的文章可以很快配置好。
接下來我們需要創建一個WebDriver實例，它充當瀏覽器的代理，讓我們可以在網頁上執行各種操作包括訪問我們需要操作的網頁。以下是一個創建Chrome WebDriver實例并訪問目標網頁的示例：
python復制代碼
from selenium import webdriver # 創建一個Chrome WebDriver實例 driver=webdriver.Chrome() # 導航到目標網頁 driver.get("https://example.com")
要操作下拉框，首先需要找到該下拉框的HTML元素。我們可以使用Selenium的各種定位策略來找到元素，比如通過ID、XPath、CSS選擇器等。以下是一個使用XPath定位下拉框的示例：
python復制代碼
from selenium.webdriver.common.by import By # 使用XPath定位下拉框 dropdown=driver.find_element(By.XPATH, "//select[@id='dropdown']")
一旦我們定位到了下拉框元素，就可以使用Select類來選擇其中的選項。首先，導入Select類：
python復制代碼
from selenium.webdriver.support.ui import Select
然后，創建一個Select對象，傳遞下拉框元素作為參數：
python復制代碼
# 創建Select對象 dropdown_select=Select(dropdown)
然后，我們可以使用Select對象來選擇選項。有兩種常見的方法可以選擇選項：按索引和按可見文本。以下是示例代碼：
python復制代碼
# 通過索引選擇第二個選項（索引從0開始） dropdown_select.select_by_index(1)
按可見文本選擇選項：
python復制代碼
# 通過可見文本選擇選項 dropdown_select.select_by_visible_text("Option 2")
python復制代碼
# 提交表單 driver.find_element(By.ID, "submit-button").submit()
本文主要介紹了使用selenium處理下拉框的詳細步驟，下拉框作為我們經常需要處理的元素，了解如何操作下拉框對于我們進行web自動化測試非常重要，希望本文可以幫到大家！
霍格沃茲測試開發學社|免費學習資料大放送，助你事半功倍！ - 公眾號 - 測試人社區
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
