jq模仿下拉菜单select

Posted 2020-11-20 ydam

今天公司app ios版内测，发现select在安卓和ios上样式不统一，并且不好修改，一气之下放弃使用select，手写了一个用div模仿select的模块

话不多说上代码

//样式

.zezhao {
width: 100%;
height: 800px;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
}

.disn {
display: none;
}

.disb {
display: block;
}

.yuan {
overflow: hidden;
border-radius: 11px;
border: 1px solid black;
}

.yuany {
margin-left: 4px;
margin-top: 4px;
float: left;
overflow: hidden;
border-radius: 6px;
border: 1px solid #16A086;
background-color: #16A086;
}

.yuanx {
overflow: hidden;
border-radius: 11px;
border: 1px solid #16A086!important;
}

//html布局

<div class="kuang">
<h3 class="margin">商家类别 * </h3>
<span class="margin">请选择此项</span>
<div id="se" style="width: 91%; border-radius: 5px; height: 39px; line-height: 39px; padding-left: 10px;font-size: 14px; border: 1px solid black; background-color: white;">请选择</div>
<input id="see" type="hidden" name="" id="" value="" />
</div>

<div class="zezhao disn">
<div style="border-radius: 4px; width: 85%;background-color: white;margin: 0 auto; margin-top: 20px;">
<ul id="u" style=" overflow: hidden; overflow:scroll;">
<foreach name="catOb" item="v">
<li class="l" style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc;padding-left: 30px;" onclick="zjm(‘{$v.zs_name}‘,‘{$v.id}‘)" value="{$v.id}"><span style="float: left;">{$v.zs_name}</span>
<div id="{$v.id}" class="yuan" style="width: 20px; height: 20px;margin-top: 14.5px; float: right; margin-right: 10px;">
<span class="" style="width: 10px;height: 10px;"></span>
</div>
</li>
</foreach>
</ul>
</div>

</div>

 

//jq方法

<script type="text/javascript" charset="utf-8">

var h = window.screen.height * 0.7;
var mh = window.screen.height * 0.1;
console.log(h)
$("#u").css("height", h);
$("#u").css("margin-top", mh);
$(‘#se‘).click(function() {
$(‘.zezhao‘).removeClass(‘disn‘);
$(‘.zezhao‘).addClass(‘disb‘);
})

function zjm(a, b) {

$(‘#se‘).text(a);
$(‘#see‘).val(b);

$(‘#‘ + b + ‘‘).addClass(‘yuanx‘);
$(‘#‘ + b + ‘‘).parents().siblings().children().removeClass(‘yuanx‘);
$(‘#‘ + b + ‘ span‘).addClass(‘yuany‘);
$(‘#‘ + b + ‘‘).parents().siblings().children().children().removeClass(‘yuany‘);

}
$(‘.l‘).click(function() {
$(‘.zezhao‘).removeClass(‘disb‘);
$(‘.zezhao‘).addClass(‘disn‘);
})

</script>