html下拉选择框;html下拉框

html-css030

html下拉选择框;html下拉框,第1张

在很多网站都有看到下拉框的功能，让我们一起来看看html如何制作下拉框。

01

新建一个html文件。如图

02

在html页面找打body标签，在这个标签里新建select标签，在select标签内创建option标签并设置内容。如图

代码：

<select>

<option>-请选择-</option>

<option>1111111</option>

<option>2222222</option>

<option>3333333</option>

</select>

03

保存好html文件后使用浏览器打开，即可看到效果。如图：

04

所有代码。可直接把所有代码复制到html文件上运行即可看到效果。如图：

所有代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>下拉选择框</title>

</head>

<body>

<select>

<option>-请选择-</option>

<option>1111111</option>

<option>2222222</option>

<option>3333333</option>

</select>

</body>

</html>

现在我们有一个下拉列表，Html代码如下：

[html] view plain copy

<select id="fruit_type">

<option value ="f1">Apple</option>

<option value ="f2">Banana</option>

<option value ="f3">Orange</option>

<option value ="f4">Pearl</option>

</select>

这个是时候我们想拿到选中的水果的名字，比如Apple，下面的代码不行：

[javascript] view plain copy

var fruit_select = document.getElementById("fruit_type")

var fruit_name = fruit_select.value

这个时候只能拿到水果的id，比如 f1

这时需要先得到选中的菜单项的index，再取文字

[javascript] view plain copy

var fruit_select = document.getElementById("fruit_type")

var fruit_index=fruit_type_select.selectedIndex

[javascript] view plain copy

// 这行会返回 f1

var fruit_id = fruit_type_select.options[fruit_type_index].value

[javascript] view plain copy

// 这行才能返回我们想要的 Apple

var fruit_name = fruit_type_select.options[fruit_type_index].text

当某个option的selected属性设置为selected时，表示默认选中。

比如：

<select>

<option

value="1"

selected="selected">1</option>

<option

value="2">2</option>

</select>