Rumah > hujung hadapan web > html tutorial > html optgroup标签是什么意思?关于html optgroup标签的用法和属性实例解析

html optgroup标签是什么意思?关于html optgroup标签的用法和属性实例解析

寻∝梦
Lepaskan: 2018-08-21 14:21:54
asal
4524 orang telah melayarinya

html optgroup标签是什么意思?关于html optgroup标签的用法和属性实例解析都在这篇文章中,为大家介绍了html optgroup标签的定义和属性实例,还有html optgroup标签的使用方法

html optgroup标签的定义和用法:

标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

HTML 标签实例:

通过 标签把相关的选项组合在一起:

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>
Salin selepas log masuk

html optgroup标签必需的属性:

label : text : 为选项组规定描述。(如上实例)

html optgroup标签可选的属性:

disabled : disabled : 规定禁用该选项组。

HTML 标签的 disabled 属性

optgroup标签的disabled属性定义:

disabled 属性规定禁用该选项组。被禁用的选项组既不可用,也不可点击。

可以设置 disabled 属性,直到满足某些条件(比如选择一个复选框),才恢复用户对该选项组的使用。然后,可以使用 JavaScript 来清除 disabled 属性,以使选项组变为可用状态。

optgroup标签的disabled属性实例

一个禁用的选项组:


<select>
  <optgroup label="German Cars" disabled="disabled">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
Salin selepas log masuk

html中optgroup标签用法,分组、只读的且呈树状样式显示:

在html的select标签中除了了option标签外,还有一个标签就是optgroup 。它能帮我们做什么咧?

从名称我们就已经领会到接分意思:它是一个option的组,就像checkboxgroup、radiogurop一样,是分组用的;

看看下面一段代码,在浏览器中打开你可以看到一个下拉菜单。但是当你选择java或.Net的时候,是不能选择的。

而且样式和option标签的样式也不同,字体加粗了。且下拉菜单呈树状的样式显示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
    <head>  
        <title>optgroup</title>  
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
        <meta http-equiv="description" content="this is my page">  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    </head>  
    <body>  
        <select>  
            <optgroup label="Java">  
                <option value="jsp Servlet">jsp Servlet</option>  
                <option value="javaEE">javaEE</option>  
            </optgroup>  
            <optgroup label=".Net">  
                <option value="aspx">aspx</option>  
                <option value="C#">C#</option>  
            </optgroup>  
        </select>  
    </body>  
</html>
Salin selepas log masuk

浏览器支持

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

全局属性

标签支持 HTML 中的全局属性。

事件属性

标签支持 HTML 中的事件属性。

【相关推荐】

html abbr标签是什么意思?html abbr标签的具体用法详解

html address标签怎么用?html address标签的使用方法详解

Atas ialah kandungan terperinci html optgroup标签是什么意思?关于html optgroup标签的用法和属性实例解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan