帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery下拉选择框获取一个或多个值
jQuery下拉选择框获取一个或多个值
浏览:1133次
-
评论:1次
-
发布时间:2017-12-25
Html
Css
Js
旅游保险
自驾游保险
商务出行保险
全球旅游保险
高原游保险
意外保险
航空意外年险
交通意外险
人身意外险
高风险运动险
@charset "utf-8"; * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } .selectbox { width: 700px; margin: 0 auto; } input { cursor: pointer; width: 200px; height: 25px; } .selemediv { width: 180px; height: 35px; float: left; margin-top: 30px; margin-left: 30px; position: relative } .insuranceList { box-shadow: 0px 0px 1px 1px #ccc; font-size: 14px; color: #666; padding: 20px 40px; position: absolute; top: 35px; left: 0; background: #fff; border-bottom: 1px solid #f6f6f6; display: none; border-radius: 5px; } .insuranceList ul { float: left; width: 500px; line-height: 54px; } .insuranceList ul li { float: left; cursor: pointer } .insuranceList ul li:hover { color: dodgerblue } .insuranceList li { width: 25%; } .insuranceList .leibie { width: 80px; float: left; line-height: 54px; } ul, li { list-style: none; } .insuranceList .active { color: #fff; background-color: dodgerblue; display: inline-block; width: 80px; height: 30px; line-height: 30px; text-align: center; border-radius: 5px; } .insuranceType1, .insuranceType2 { width: 80px; height: 30px; line-height: 30px; text-align: center; float: left; font: normal bold 16px/24px arial, sans-serif; cursor: pointer } .typeList1 ._active { color: dodgerblue; } .typeList2 ._active { color: dodgerblue; }
//展开下拉框 $(".selemenu").click(function() { $(this).next().slideToggle(200); }) getVal('.insuranceType1', '.typeList1 li'); getVal('.insuranceType2', '.typeList2 li'); function getVal(element, element2) { $(element).click(function() { $(this).addClass("active"); var text1 = $(this).text(); $('#myIput').val(text1); $(element2).removeClass("_active"); }) $(element2).click(function() { $(element).addClass("active"); $('#myIput').val(''); $(element2).removeClass("_active"); $(this).addClass("_active"); var text2 = $(this).text(); $('#myIput2').val(text2); $('#myIput').val($(element).text() + ">" + $('#myIput2').val()); }); $('.insuranceType1').click(function() { $('.insuranceType2').removeClass('active'); $('.typeList2 li').removeClass('_active'); }); $('.insuranceType2').click(function() { $('.insuranceType1').removeClass('active'); $('.typeList1 li').removeClass('_active'); }); $('.typeList1 li').click(function() { $('.insuranceType2').removeClass('active'); $('.typeList2 li').removeClass('active'); $('.typeList2 li').removeClass('_active'); }); $('.typeList2 li').click(function() { $('.insuranceType1').removeClass('active'); $('.typeList1 li').removeClass('active'); $('.typeList1 li').removeClass('_active'); }); $('.typeList2 li').dblclick(function() { $(".insuranceList").slideUp(200); }); $('.typeList1 li').dblclick(function() { $(".insuranceList").slideUp(200); }); } $(function() { $(document).not($(".selectbox")).click(function() { $(".insuranceList").slideUp(200); }) $(".selectbox").click(function(event) { event.stopPropagation(); }) })
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery下拉选择框获取一个或多个值-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jQuery下拉选择框,根据不同业务逻辑获取一个值或者多个值,active也随之改变。
HTML图片放大镜效果
CSS3案例之忍者滑动
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv10 CTO
华***n
2017年12月28日
不错 感谢分享
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1133
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值