html下拉框最多显示条数,如何修改select默认option数量多余显示滚动条查看

本文介绍了如何使用CSS和JavaScript来修改HTML select元素的默认样式,包括设置显示数量和添加滚动条效果。通过设置size属性并结合jQuery或原生JavaScript方法,可以实现下拉框的定制。示例代码展示了如何在选中时扩大显示选项,失去焦点时恢复原样,以及使用input和select组合实现更友好的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如何修改select下拉框的默认样式,我想这是每个程序猿在做项目时经常会用到问题,毕竟默认的样式实在不敢恭维,而且也不能满足我们的网站的整体风格,如果是用css去设置样式是没问题的,但是你要是想要根据自己的想法控制select下拉框的显示数量,以及超出部分出现滚动条的效果就不能用以往的css去设置了,不信你可以试一下。虽然select会自带出现下拉框,如下图显示,但是还是太丑,这样的作品拿出去不仅客户不买单,会被boss骂死的。老规矩先来介绍一些有关select的属性,然后提供实现方法。

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

size 属性

size 属性是今天我们实现下拉框滚动条以及显示固定数量的效果主要用到的一个属性,虽然不起眼,但是结合js就会发挥相当大的作用。

码云笔记

mybj123.com

javascript教程

前端开发教程

效果

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

通过效果可以看到,我们设置了四条option,通过select的size=3属性控制显示条数为3条,剩下的则需要下拉来查看。

说到这儿大家可能担心浏览器的支持问题,目前所有主流浏览器都支持 size 属性,所以放心使用。

定义和用法

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

如果 size 属性的值大于 1,但是小于列表中选项的总数目,浏览器会显示出滚动条,表示可以查看更多选项。

语法

属性值

描述

number

下拉列表中可见选项的数目。默认值是 1。如果使用了 multiple 属性,默认值是 4。

我们现在遇到的问题是select默认的会将所有的option全部显示出来,当数据过多时,下拉框会显得很长。

我们期待结果:带有滚动条,显示一定数量的option,通过滚动查看更多option。

两种解决方法

jQuery方法

HTML代码:

码云笔记

mybj123.com

javascript教程

前端开发笔记

前端开发教程

vue教程

HTML教程

css教程

Java教程

jQuery代码:

window.selectFocus = function(that) {

$(that).attr("size", 5);

};

window.selectClick = function(that) {

$(that).parent().removeAttr("size");

$(that).parent().blur();

$(that).parent().children("[selected='selected']").removeAttr("selected");

$(that).attr("selected", "");

};

效果展示

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

友情提示:引入jQuery包

Javascript方法

使用input和selec组合实现,推荐使用此方法,这种方式实现的效果更友好,方便移植

HTML代码:

码云笔记

mybj123.com

javascript教程

前端开发笔记

前端开发教程

vue教程

HTML教程

JavaScript代码:

function stopPropagation(e) {

if (e.stopPropagation){

/*stopPropagation符合W3C标准.适用于FireFox等浏览器,不支持IE*/

e.stopPropagation();

}else{

/*cancelBubble方法不符合W3C的标准.且只支持IE浏览器*/

e.cancelBubble = true;

}

}

let showContent = document.getElementById('showContent');

let selContent = document.getElementById('selContent');

showContent.onclick = function(e){

selContent.style.display = 'block';

stopPropagation(e);

}

selContent.size = 5;

selContent.onchange = function(e){

var option = this.options[this.selectedIndex];

showContent.value = option.innerHTML;

selContent.style.display = 'none';

}

效果展示:

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

以上都是自己纯代码实现,当然也有很多优秀的相关插件实现这些效果,这里不做推荐,我个人还是喜欢自己去写,既可以学习又能加深记忆,何乐而不为呢。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值