下拉时样式:
选择后的样式:
思想:首先展示一个select,隐藏div,当点击时,隐藏select,展示由div组成的模拟select下拉样式的组件,点击选择某个时把select的value改成选的的value,隐藏div,展示select
css:
<style>
.box {
width: 120px;
}
#select-code {
width: 120px;
height: 26px;
font-size: 16px;
}
#div-show-value {
border: 1px solid #000000;
}
.div-show-option {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
.div-show-option:last-child {
border-bottom: 1px solid #000000;
}
.active {
background-color: rgba(0,0,0,.05);
}
.div-show-option:hover {
background-color: rgba(0,0,0,.05);
cursor: pointer;
}
.none {
display: none;
}
</style>
html:
<div class="box">
<select name="" id="select-code">
<option value="86">+86</option>
<option value="886">+886</option>
<option value="852">+852</option>
</select>
<div id="div-show-value" class="none">+86</div>
<div id="div-show-option" class="none">
<div data-value="86" class="div-show-option">+86 中国</div>
<div data-value="886" class="div-show-option">+886 中国香港</div>
<div data-value="852" class="div-show-option">+852 中国台湾</div>
</div>
</div>
js:
$('#select-code').change(function() {
var chooseValue = $(this).children('option:selected').val();
})
$('#select-code').click(function() {
$('#select-code').addClass('none');
$('#div-show-value').removeClass('none');
$('#div-show-option').removeClass('none');
$('#div-show-option').click(function(e) {
var divValue = e.target.getAttribute('data-value');
$('#div-show-option .div-show-option').removeClass('active');
e.target.className = 'div-show-option active';
$('#div-show-value').html('+' + divValue);
$('#select-code').val(divValue);
$('#select-code').removeClass('none');
$('#div-show-value').addClass('none');
$('#div-show-option').addClass('none');
})
});