`
imoods1573
  • 浏览: 202692 次
社区版块
存档分类

HTML中的下拉列表 select

 
阅读更多
HTML中的下拉列表:
<select>
  <option value ="1">Volvo</option>
  <option value ="2">Saab</option>
  <option value="3">Opel</option>
  <option value="4">Audi</option>
</select>

其中select是显示一个下拉列表(drop down list)出来,option是下拉列表中的项目(item),而option的文本内容(text content)是下拉列表项目中显示到页面上的值,value是真正需要提交到服务端的值。
显示效果如下所示:


更复杂的下拉列表:
<select>
  <optgroup label="Swedish Cars">
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="3">Mercedes</option>
    <option value="4">Audi</option>
  </optgroup>
</select>

这个下拉列表包含一个“项目组”(item group),这个组是无法选择的,使用label标签标记字面内容,真正起作用的,还是value属性。
看一下这个包含“项目组”的下拉列表


option中的参数:selected="selected"
如果需要打开页面就默认选中某个option,需要用到selected参数:
  <select>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3" selected="selected">Mercedes</option>
    <option value="4">Audi</option>
  </select>


option中的参数:disabled="disabled"
如果需要禁用某个项目,但是却又不想隐藏,可以使用disabled属性
  <select>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3" disabled="disabled">Mercedes</option>
    <option value="4">Audi</option>
  </select>


option中的参数:title
如果需要在鼠标放到某个项目上时,给出提示,可以使用title属性
  <select>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Mercedes</option>
    <option value="4" title="Audi, your best choice!">Audi</option>
  </select>

其实,title也可以用在很多其他的HTML标签中!
  • 大小: 1.9 KB
  • 大小: 2.8 KB
  • 大小: 3.7 KB
分享到:
评论
1 楼 馒头仔 2016-11-05  
受用

相关推荐

    三级下拉列表 select 网页 html5

    在HTML5中,这种复杂的下拉列表通常结合`&lt;select&gt;`标签、JavaScript(JS)以及可能的CSS来实现。下面将详细介绍如何构建一个三级联动的下拉列表。 首先,我们要理解HTML5的`&lt;select&gt;`标签。`&lt;select&gt;`标签用于创建...

    二级下拉列表联动 select 网页 html5

    二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用!!!

    用JavaScript来美化HTML的select标签的下拉列表效果

    在现代网页设计中,select下拉列表是实现用户交互的一项基本元素,但在不同的浏览器中,其样式表现差异较大,且在自定义样式方面存在限制,尤其是无法完全通过CSS控制其外观。随着Web标准的推进,浏览器厂商对HTML...

    select下拉列表显示图片内容

    在网页设计中,`&lt;select&gt;`元素通常用于创建下拉列表,用户可以在其中选择一个或多个选项。然而,标准的`&lt;select&gt;`元素通常只支持文本内容,不直接支持显示图片。但随着网页交互性的增强,设计师们有时需要在下拉列表...

    固定宽度下拉列表select中option内容显示不全问题解决方法

    总的来说,处理固定宽度下拉列表`&lt;select&gt;`中`&lt;option&gt;`内容显示不全的问题需要结合HTML、CSS和JavaScript的知识。开发者需要了解浏览器对`&lt;select&gt;`元素的限制,然后根据需求选择最合适的解决方案,无论是使用现有...

    带输入框的下拉列表 select 输入框 过滤

    在网页设计和开发中,"带输入框的下拉列表 select 输入框 过滤"是一种常见的交互元素,它结合了传统的HTML `&lt;select&gt;` 元素和一个输入框,以提供更高效、用户友好的搜索过滤功能。这种设计使得用户可以在长长的选项...

    select级联下拉列表

    在网页设计中,"select级联下拉列表"是一种常见的交互元素,用于创建省市区选择、类别层级展示等场景。这种技术通常结合JavaScript(JS)、HTML5和jQuery库来实现,使得用户能够在多个下拉菜单之间进行联动选择,...

    三款漂亮的下拉列表 select

    在网页设计中,下拉列表(Select)是用户界面中常见的一种交互元素,它用于提供一组可选项供用户选择。本文将详细介绍三款美观且功能丰富的下拉列表组件,它们利用JavaScript和CSS技术,提供了出色的用户体验和高度...

    div模拟select自定义下拉列表框(jQuery)

    总之,使用div模拟select自定义下拉列表框是网页开发中常见的技巧,它能够帮助开发者突破原生HTML元素的限制,实现更加灵活和个性化的交互设计。通过熟练掌握这一技术,可以提升网页的用户体验,增加网站的吸引力。

    可输入的html下拉列表框,自带筛选

    "可输入的HTML下拉列表框,自带筛选"是一种优化用户体验的常见功能,它允许用户在下拉菜单中通过输入关键字来快速定位并选择所需项,极大地提高了操作效率。这种技术主要涉及到HTML、CSS以及JavaScript等前端技术,...

    绿色下拉列表html

    在网页设计中,下拉列表(Select)是用户界面中常用的一种交互元素,它允许用户在预设的一组选项中进行选择。"绿色下拉列表html"可能指的是使用HTML配合CSS来创建一个具有绿色主题风格的下拉选择框。下面我们将深入...

    JS中Select下拉列表类(支持输入模糊查询)功能

    JS中Select下拉列表类支持输入模糊查询功能的知识点主要包括以下几个方面: 1. HTML结构设计:实现输入模糊查询功能的下拉列表通常包含一个输入框和一个下拉框。输入框用于用户输入查询字符,下拉框则是提供选项供...

    下拉列表 可输可选 select

    在网页设计中,下拉列表(Select)是常见的交互元素,用于提供一组预设选项供用户选择。然而,原生的HTML `&lt;select&gt;` 标签存在一定的局限性,例如不支持用户输入自定义值。为了解决这个问题,开发者通常会采用自定义...

    下拉列表二级联动

    二级联动的核心在于监听第一个下拉列表的`onChange`事件,当用户在第一个下拉列表中选择一个选项时,触发该事件,通过JavaScript获取当前选中的索引或值,然后根据这个信息动态地更新第二个下拉列表的选项。...

    css 设置下拉列表 select 样式

    当涉及到交互式的表单元素时,如下拉列表`&lt;select&gt;`,CSS的运用就显得尤为重要,因为它可以帮助我们定制默认样式,提升用户体验。本文将详细探讨如何使用CSS设置下拉列表`&lt;select&gt;`及其选项`&lt;option&gt;`的样式。 首先...

    Html dom中的select, option_ 级联下拉列表

    select和option是HTML中构建下拉列表的两个关键元素。select元素代表了下拉列表本身,而option元素则是列表中的各个选项。在级联下拉列表中,通常通过改变option元素来实现动态更新。在HTML DOM中操作select和option...

    下拉列表显示图片

    总结来说,要在下拉列表中显示图片,可以使用HTML的`&lt;select&gt;`元素结合JavaScript库(如msdropdown)和CSS样式。通过这种方式,不仅可以提升表单的视觉吸引力,还能提高用户的操作效率。在实际项目中,还需要考虑到...

    Jquery实现select下拉列表根据radio选项级联

    在这个场景中,通常会有两个主要元素:radio按钮组和多个select下拉列表。每个radio按钮对应一个特定的下拉列表。例如: ```html &lt;label for="radio1"&gt;Option 1 &lt;label for="radio2"&gt;Option 2 &lt;select id=...

    select多选下拉列表+模糊查询功能.rar

    select多选下拉列表+模糊查询功能,亲测完整,有ASP和HTML样例,代码完整。 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script src="jquery.min.js"&gt;&lt;/script&gt; ...

Global site tag (gtag.js) - Google Analytics