【html】设置有滚动条的select
问题提出：select默认的会将所有的option全部显示出来，当数据过多时，下拉框会显得很长。
期待结果：带有滚动条，显示一定数量的option，通过滚动查看更多option。
第一种方式：
效果展示：
源码：
<select class='newsTypeList' οnfοcus="selectFocus(this)">
<option οnclick="selectClick(this)">1</option>
</select>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", "");
};
第二种方式：
使用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 = document.getElementById('show');
let words = document.getElementById('words');
show.onclick = function(e){
words.style.display = 'block';
}
words.size = 3;
words.onchange = function(e){
var option = this.options[this.selectedIndex];
show.value = option.innerHTML;
words.style.display = 'none';
}
</script>
</body>
</html>