企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

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

JavaScript笔记 码云 61℃ 0评论
目录
[隐藏]

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

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

<select> size 属性

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

<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,但是小于列表中选项的总数目,浏览器会显示出滚动条,表示可以查看更多选项。

语法

<select size="number">

属性值

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

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

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

两种解决方法

jQuery方法

HTML代码:

<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代码:

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代码:

<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代码:

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下拉框的默认样式

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

转载请注明:码云笔记 » 如何修改select默认option数量多余显示滚动条查看

喜欢 (4)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址