【html】设置有滚动条的select 问题提出：select默认的会将所有的option全部显⽰出来，当数据过多时，下拉框会显得很长。
期待结果：带有滚动条，显⽰⼀定数量的option，通过滚动查看更多option。
第⼀种⽅式：
效果展⽰：
源码：
<select class='newsTypeList' οnfοcus="selectFocus(this)">
<option οnclick="selectClick(this)">1</option>
</select>
window.selectFocus = function(that) {
html横向滚动条样式
$(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", "");
};
第⼆种⽅式：
使⽤input和selec组合实现
<!DOCTYPE html>
<html>
<head>
<title>Combobox</title>
<meta charset="utf-8">
<style type="text/css">
*{
box-sizing:border-box;
}
input,select{
width: 200px;
}
#words{
display: none;
}
</style>
</head>
<body>
<input id="show" type="text" name=""> <br /> <select id="words">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
</select>
<script type="text/javascript">
let show = ElementById('show');  let words = ElementById('words');  lick = function(e){
words.style.display = 'block';
}
words.size = 3;
var option = this.options[this.selectedIndex];  show.value = option.innerHTML;
words.style.display = 'none';
}
</script>
</body>
</html>
这种⽅式效果更友好，⽅便移植

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。