html下拉列表初始状态,HTML选择:如何设置不会在下拉列表中显示的默认文本?...
发布日期:2022-02-21 12:50:40 浏览次数:38 分类:技术文章

本文共 706 字,大约阅读时间需要 2 分钟。

我有一个解决方案,选择上方显示的范围,直到完成选择。跨度显示默认的消息,所以它不是在命题的列表:

HTML:

Default message

Option 1

Option 2

Option 3

CSS:

#default_message_overlay {

position: absolute;

display: block;

width: 120px;

color: grey;

}

select {

width: 150px;

}

的JavaScript(用jQuery):

$(document).ready(function() {

// No selection at start

$('#my_select').prop("selectedIndex", -1);

// Set the position of the overlay

var offset = $('#my_select').offset();

offset.top += 3;

offset.left += 3;

$('#default_message_overlay').offset(offset);

// Remove the overlay when selection changes

$('#my_select').change(function() {

if ($(this).prop("selectedIndex") != -1) {

$('#default_message_overlay').hide();

}

});

});

我制作了jsfiddle for demo。经过Firefox和IE8测试。

转载地址:https://blog.csdn.net/weixin_33958381/article/details/117757796 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:android 适配器接口,RecyclerView在适配器里使用接口将实现交给界面或者用户来处理...
下一篇:txt文档编辑html不显示图片,Layui富文本编辑器内容不显示,图片上传等问题

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年02月05日 03时31分05秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章