超详细的HTML 标签用法及技巧介绍

beat365官方为什么不能提款 🕊️ 2025-09-21 17:56:44 ✍️ admin 👀 9466 ❤️ 498

元素用来创建下拉列表。

元素中的 标签定义了列表中的可用选项。

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将

表单数据提交给服务器时包括 name 属性。

提示和注释

提示： 元素是一种表单控件，可用于在表单中接受用户输入。

HTML 4.01 与 HTML5之间的差异

HTML5 增加了一些新的属性。

实例

创建带有 4 个选项的选择列表：

Volvo

Saab

Mercedes

Audi

尝试一下 »

浏览器支持

所有主流浏览器都支持 标签。

属性

New ：HTML5 中的新属性。

属性

值

描述

autofocusNew

autofocus

规定在页面加载时下拉列表自动获得焦点。

disabled

disabled

当该属性为 true 时，会禁用下拉列表。

formNew

form_id

定义 select 字段所属的一个或多个表单。

multiple

multiple

当该属性为 true 时，可选择多个选项。

name

name

定义下拉列表的名称。

requiredNew

required

规定用户在提交表单前必须选择一个下拉列表中的选项。

size

number

规定下拉列表中可见选项的数目。

全局属性

标签支持 HTML 的全局属性。

事件属性

标签支持 HTML 的事件属性。

相关文章

HTML DOM 参考手册： Select 对象

标签的使用技巧总结

1.动态创建select

function createSelect(){

var mySelect = document.createElement("select");

mySelect.id = "mySelect";

document.body.appendChild(mySelect);

}

2.添加选项option

function addOption(){

//根据id查找对象，

var obj=document.getElementById('mySelect');

//添加一个选项

obj.add(new Option("文本","值"));

}

3.删除所有选项option

function removeAll(){

var obj=document.getElementById('mySelect');

obj.options.length=0;

}

4.删除一个选项option

function removeOne(){

var obj=document.getElementById('mySelect');

//index,要删除选项的序号，这里取当前选中选项的序号

var index=obj.selectedIndex;

obj.options.remove(index);

}

5.获得选项option的值

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;

6.获得选项option的文本

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;

7.修改选项option

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){

var mySelect = document.getElementById("mySelect");

mySelect.parentNode.removeChild(mySelect);

}

9.设置select option被选中

function removeSelect(){

// 向办件人员下拉列表动态添加员工

for ( var i = 0; i < json.length; i++) {

var newOption = new Option(json[i].empname, json[i].empid, i);

//向办件人员下拉列表添加员工信息

objDeal.options.add(newOption);

//客户业务员的Id不为空

if(empbyDealEmpId!="" || empbyDealEmpId!=0){

//员工id等于下拉列表中的值,则下拉列表被选中

if(empbyDealEmpId==objDeal.options[i].value){

//判断此下拉列表被选中

objDeal.options[i].selected=true;

}

}

}

}

案例：

如何让html里的select无法选择？

假设有一个select，里面有几个option，因为测试需要，要固定成为其中的一个option，不能选择其他，该怎么做呢？如果disabled这个select，结果就是根本没法取到值了。有没其他的方法？readonly，也是不可以的，依旧可以选择。

答案：只放一个option就可以了 或者给option加上disabled="disabled"

aa

bb

cc

怎么调整select的宽度？

答案：可以在select标签中加入style样式

很长很长也能显示

很长很长也能显示

html select标签加链接3种方法html select标签加链接的方法有很多，接下来为大家介绍下几个比较经典的，,感兴趣的朋友可以参考下，希望可以帮助到你。

第一种：

=== 合作伙伴 ===

百度

w3cschool在线教程

优聚

第二种：

百度

w3cschool在线教程

第三种带跳转按钮的：

百度

w3cschool在线教程

优聚

扩展知识

select 还可以作为SQL（结构化查询语言）中的查询语句使用，SELECT语句返回用指定的条件在一个数据库中查询的结果，其返回的结果被看作记录的集合。关于 SQL 的知识，您可以参考本站的完整的《SQL教程》！