当前位置: 开发笔记 > 编程语言 > 正文

在select中，载入时默认select为空白，选项内不显示空白项

作者：ll等待花开的大婶_oO_107 | 来源：互联网 | 2023-10-12 11:58

在select中，载入时默认select为空白，选项内不显示空白项2017-03-0816:265789人阅读评论(0)

在select中，载入时默认select为空白，选项内不显示空白项

2017-03-08 16:26 5789人阅读评论(0) 收藏举报

分类：

css（17）

Javascript（18）

今天做select的时候，页面要求为：载入默认选项框为空白，点击下拉框显示正常选项。

找了半天有两种办法，一种纯css实现，一种借助js实现。

先说js的办法吧。

html：

[html] view plain copy

print ?

<body onload="load()">
<select id="abc" >
<option >1option>
<option >2option>
<option >3option>
<option >4option>
select>
body>

js：

[html] view plain copy

print ?

<script>
function load()
{
var x = document.getElementById("abc");
x.selectedIndex = -1;
}
script>

实测成功。

纯css的方法：

[html] view plain copy

print ?

<option selected="selected" disabled="disabled" style='display: none' value=''>option>

上面的option置于第一行即可。

其实测了测，发现如果只保留：

[html] view plain copy

print ?

style='display: none'

效果也是一样的。

推荐阅读

join
Web前端开发中的HTML与CSS命名规范

作为一名专业的Web前端工程师，掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性，还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范，并提供实用的建议。 ... [详细]

蜡笔小新 2024-12-25 11:06:17
join
自己用过的一些比较有用的css3新属性【HTML】

web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细]

蜡笔小新 2024-12-24 19:26:54
join
前端开发：从底层到顶端的行业现象解析

在编程领域，鄙视链现象屡见不鲜，从C语言到Java、.NET等，每个技术栈都有其独特地位。然而，前端开发者尽管常处于鄙视链底端，却在市场需求中备受青睐。本文深入探讨这一现象，并分析前端工程师如何在竞争激烈的市场中脱颖而出。 ... [详细]

蜡笔小新 2024-12-24 18:41:48
install
通过Web界面管理Linux日志的解决方案

本指南介绍了一种利用rsyslog、MariaDB和LogAnalyzer搭建集中式日志管理平台的方法，使用户可以通过Web界面查看和分析Linux系统的日志记录。此方案不仅适用于服务器环境，还提供了详细的步骤来确保系统的稳定性和安全性。 ... [详细]

蜡笔小新 2024-12-24 17:11:38
install
华为ENSP模拟器指令详解：计算机网络实验指南

本文详细解释了华为ENSP模拟器中常用的命令，涵盖用户模式、系统模式、接口模式和地址池视图模式下的操作。这些命令对于进行计算机网络实验至关重要，帮助用户更好地理解和配置路由器及PC机的通信。 ... [详细]

蜡笔小新 2024-12-24 16:05:09
email
深入解析 Django ORM：Model 和 Field 类型

本文详细探讨了 Django 的 ORM（对象关系映射）机制，重点介绍了其如何通过 Python 元类技术实现数据库表与 Python 类的映射。此外，文章还分析了 Django 中各种字段类型的继承结构及其与数据库数据类型的对应关系。 ... [详细]

蜡笔小新 2024-12-24 15:25:10
email
BZOJ 3196: Tyvj 1730 平衡树问题

探讨了在有序数列中实现多种查询和修改操作的高效数据结构设计，主要使用线段树与平衡树（Treap）结合的方法。 ... [详细]

蜡笔小新 2024-12-24 15:12:26
email
JavaScript实现表格数据的实时筛选功能

本文介绍如何使用JavaScript实现对表格数据的实时筛选，帮助开发者提高用户体验。通过简单的代码示例，展示如何根据用户输入的关键字动态过滤表格内容。 ... [详细]

蜡笔小新 2024-12-25 09:51:24
email
ASP.NET Core 3.1 中的Startup类

Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类，按照约定命名为 Startup。 Startup 类：可选择性地包括 ... [详细]

蜡笔小新 2024-12-25 02:13:25
range
Qt中QSpinBox与QSlider的联动实现

本文介绍如何在Qt框架下将QSpinBox和QSlider组件进行联动，使用户在拖动滑块或修改文本框中的数值时，两个组件能同步更新，从而提供更加直观和便捷的用户体验。 ... [详细]

蜡笔小新 2024-12-24 19:33:45
range
实现两个线程交替打印数字和字母的同步机制

本文介绍了如何使用Java中的同步方法和同步代码块来实现两个线程的交替打印。一个线程负责打印1到52的数字，另一个线程负责打印A到Z的字母，确保输出顺序为12A34B...5152Z。 ... [详细]

蜡笔小新 2024-12-24 18:25:02
grid
深入理解网易NEC CSS框架：规范、应用与学习心得

本文将介绍网易NEC CSS框架的规范及其在实际项目中的应用。通过详细解析其分类和命名规则，探讨如何编写高效、可维护的CSS代码，并分享一些实用的学习心得。 ... [详细]

蜡笔小新 2024-12-24 18:08:51
window
JavaScript 实战与基础案例解析

本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例，涵盖从入门到进阶的各个阶段，帮助读者全面提升JavaScript编程能力。 ... [详细]

蜡笔小新 2024-12-24 16:36:52
export
React 表单验证：构建无第三方库的表单处理机制

本文将深入探讨如何在不依赖第三方库的情况下，使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法，涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]

蜡笔小新 2024-12-24 15:48:48
export
技术变现之道：从日常工作中挖掘潜力

本文探讨了如何在日常工作中通过优化效率和深入研究核心技术，将技术和知识转化为实际收益。文章结合个人经验，分享了提高工作效率、掌握高价值技能以及选择合适工作环境的方法，帮助读者更好地实现技术变现。 ... [详细]

蜡笔小新 2024-12-24 15:21:23

ll等待花开的大婶_oO_107

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章