最近在写项目时,需要修改原本自带样式,真心感到这些原生样式的顽固性。 ———题记
如上图所示为原生样式,在选择后页面回显为“选中了..项”,这样的显示非常不直观,对于用户来讲看着些许简陋,所以根据之前用过的饿了么插件的样式对当前样式进行修改。
1、修改第一步:原本样式opacity:0;接着增加一个新的div对其进行覆盖,设置div样式与select样式重合;
<body>
<div class="search_replace">请选择</div>
<select multiple="multiple">
<option>Pen</option>
<option>Apple</option>
<option>ApplePen</option>
<option>PineApple</option>
</select>
</body>
.search_replace{
width: 100%;
height: 30px;
position: absolute;
background: #FFFFFF;
text-align: center;
line-height: 30px;
}
select{
opacity: 0;
}
2、将选择项回显
var allSelected = [];
var selectStr = '';
var oSelect = document.querySelector('select');
var aOptionArr = oSelect.options;
oSelect.addEventListener('change', function() {
allSelected = [];
for(var i = 0; i < aOptionArr.length; i++) {
if(aOptionArr[i].selected) {
//选中所有项
allSelected.push(aOptionArr[i].innerHTML);
}
}
if(allSelected.length == 0) return;
allSelected.forEach((sel, index) => {
if(index == 0) {
selectStr = sel;
} else {
selectStr = sel + ' +' + index;
}
})
document.querySelector('.search_replace').innerHTML = selectStr;
})
结果展示如下,虽然依然很丑,但是样式都是可以改的嘛,对吧:
就这样啦,继续加油哇