HTML结构:
<span>--请选择--</span>
<select name="phyletype" id="phyletype">
<option value="">--请选择--</option>
<option value="0">汉族</option>
<option value="1">壮族</option>
<option value="2">回族</option>
<option value="3">满族</option>
<option value="4">苗族</option>
<option value="5">藏族</option>
<option value="6">傣族</option>
<option value="7">维吾尔族</option>
<option value="8">蒙古族</option>
<option value="9">布依族</option>
<option value="10">日本族</option>
</select>
css:
<style>
*{
margin: 0;
padding: 0;
}
span{
display: inline-block;
width: 200px;
height: 30px;
line-height: 30px;
background: rgb(225, 250, 215);
border-radius: 5px;
margin-bottom: 5px;
text-align: center;
}
select {
position: absolute;
left: 0;
top: 0;
background: antiquewhite;
width: 200px;
border: none;
height: 30px;
border-radius: 5px;
text-align: center;
-webkit-appearance: none;
appearance: none;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0;
}
select > option {
text-align: center;
}
</style>
zepto下的js:
<script src='./zepto.js'></script>
<script>
$(function () {
$('select').on('change', function (e) {
var getValue = $('option').not(function () { return !this.selected }).text();
$('span').text(getValue)
})
})
</script>