整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、下拉框操作
实现效果如下：
完整源码：
<!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属性！）
<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小时内与您取得联系。
