码云笔记前端博客
Home > 前端技术 > 如何修改select默认option数量多余显示滚动条查看

如何修改select默认option数量多余显示滚动条查看

2018-11-13 分类:前端技术 作者:码云 阅读(1023)

本文共计1926个字,预计阅读时长需要5分钟。

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

如何修改select下拉框的默认样式

<select> size 属性

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

1
2
3
4
5
6
<select size="3">
  <option value="volvo">码云笔记</option>
  <option value="saab">mybj123.com</option>
  <option value="opel">javascript教程</option>
  <option value="audi">前端开发教程</option>
</select>

效果

<select> size 属性

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

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

定义和用法

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

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

语法

1
<select size="number">

属性值

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

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

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

两种解决方法

jQuery方法

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
<select class='newsTypeList' onfocus="selectFocus(this)">
    <option onclick="selectClick(this)">码云笔记</option>
    <option onclick="selectClick(this)">mybj123.com</option>
    <option onclick="selectClick(this)">javascript教程</option>
    <option onclick="selectClick(this)">前端开发笔记</option>
    <option onclick="selectClick(this)">前端开发教程</option>
    <option onclick="selectClick(this)">vue教程</option>
    <option onclick="selectClick(this)">HTML教程</option>
    <option onclick="selectClick(this)">css教程</option>
    <option onclick="selectClick(this)">Java教程</option>
</select>

jQuery代码:

1
2
3
4
5
6
7
8
9
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", "")
};

效果展示

如何修改select下拉框的默认样式

友情提示:引入jQuery包

Javascript方法

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

HTML代码:

1
2
3
4
5
6
7
8
9
10
<input id="showContent" type="text" name=""><br />
<select id="selContent">
    <option>码云笔记</option>
    <option>mybj123.com</option>
    <option>javascript教程</option>
    <option>前端开发笔记</option>
    <option>前端开发教程</option>
    <option>vue教程</option>
    <option>HTML教程</option>
</select>

JavaScript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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';
}

效果展示:

如何修改select下拉框的默认样式

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
5

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 如何修改select默认option数量多余显示滚动条查看

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8648034 次
  • 最近更新: 2019年10月21日