jq模仿下拉菜单select

今天公司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>

原文地址:https://www.cnblogs.com/ydam/p/9217056.html

时间: 2024-10-17 18:16:47

jq模仿下拉菜单select的相关文章

下拉菜单select高度(兼容IE6/IE7/IE8/火狐等主流浏览器)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

邮件审批:表单作为邮件内容展示问题处理过程1——下拉菜单select问题

在仿照费控和用友做邮件审批时,增加了对表单内容的显示.在系统中做审批时,表单内容有丰富的控件展示,简单的有input,textarea,radio,复杂的有自定义的审批控件.附件控件和人员选择器等.目前复杂控件展示没有问题,复杂控件为只读状态时,展示给用户的就是普通的input或table:简单控件中当为select时出现无法绑定值的问题.即不管其选中项是什么,展示出来的始终是第一项. 根据问题症状,之前在审批展示时,也出现过因下拉菜单展示有问题(如始终展示第一项或最后一项)导致的问题.究其根源

JS自定义下拉菜单select

由于系统自定的select样式的确丑到爆,所以抽空写了这么一个可以自定义下拉菜单样式的插件, 思路就是隐藏select,用一个span标签显示内容,ul标签显示下拉列表,如图: IE下存在一个BUG,设置overflow-y后,IE下设置width无效,只测试了IE9,其他版本未测试,当然如果能加入自定义样式的滚动条就完美了,时间关系以后再补吧 代码如下: 1 //自定义dropdownlist的样式, 2 //classname为模拟出来的span标签样式 3 //ulClass为下拉列表样式

下拉菜单select友情链接自动跳转做法

当前页面直接跳转: JavaScript代码 <select name="qq" onchange="javascript:location.href=this.value;">   <option value="http://www.bhcode.net" selected="selected" >BHCODE</option>   <option value="http:

下拉菜单select 表单域

http://www.w3school.com.cn/                      W3C https://developer.mozilla.org/zh-CN/           MDN https://www.cnblogs.com/jin-xin/articles/7459955.html 原文地址:https://www.cnblogs.com/chenliangyuan/p/9780410.html

jquery如何删除select下拉菜单中所有的option项

jquery如何删除select下拉菜单中所有的option项:在实际应用中,有可能要求一次性删除所有的select下拉菜单的option选项,方法非常的简单.select下拉菜单: <select id="mayi"> <option value="1">蚂蚁部落一</option> <option value="2">蚂蚁部落二</option> </select> 删除

AngularJS ng-options下拉菜单绑定数值

这两天做了一个页面,结构比较简单,最上方有两个下拉菜单,选择后点击确定,浏览器会通过AJAX获取数据并在下方生成表格. 因为刚接触AngularJS,最近经常性地陷入某些"陷阱"中 = = 这次遇到的一个问题是,当我写成形如以下格式的时候: select option(ng-repeat="item in itemList" ng-model="choosenItem" value="{{item}}") {{item}} 可

DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴沙漠化一个例子: <script type="text/javascript"> function getChoice() { var oForm = document.forms["uForm1"]; var aCh

html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架

简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下拉菜单美化 1 input{appearance:none;background-color:transparent;border: solid 0px #000;} /*input 无边框*/ 2 input:disabled{background-color:#d2d2d2;border:0px