pc端美化select,jquery获取select中的option的text值
jQuery 获取 SELECT Text PC option 美化
2023-09-14 08:58:23 时间
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: 宋体, Arial, Helvetica; font-size: 12px; color: rgb(51, 51, 51); } button { border: 0; } .box_wrapper { width: 300px; height: 100%; overflow: hidden; background-color: #fff0c5; border: 1px solid #cdbe93; margin: 10px auto; } .box { padding: 10px 20px; overflow: hidden; } .public_sel { position: relative; float: left; } .public_sel span { height: 32px; line-height: 32px; border: 1px solid #cdbe93; font-size: 14px; padding-left: 5px; display: block; width: 91px; color: #333; background: #fae3a5 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAYAAAFxv/3CAAABPUlEQVR42mKwcQr8DwQMDNPXX2EwsHJlAAggBhCPiQEIAAIIzAKC/zy8Aj8BAohh5ZF3SiCBoNh8IyYOTl5TRkbG/6Z2HucYQaL6Fk6iP358ew0QQAynX0P0APEdILYHsWdvvsoANgyEpeRV74MEkwo7GZz94hgAAojBzNFvE0wShu09QvczFLcuegs1ygeI94PYOy9+Y4C7C4aFRMQZzr/4zwB2CVALswgj4x8hMalAQwuXDSCVLCBCmIHhb9fCwyZbV00/+/jhTQZGoBhAgDGdffu/E2oM0GCGemFxaU5kh0C9ALb7/p//ELu/ATErO+dfZDcgY3Ud09lVvSsYluy4ifD3EyAOSSrbjuJwUcn/lT2rGLzDsxj0zV0ZJOTUIZ5ABrO33lFN81G9BGRuZWZmCUnIa2N4++opXB4AWL2nlqvdbeUAAAAASUVORK5CYII=) no-repeat 95% center; margin-left: -1px; } .public_sel .sel { position: absolute; top: 0; left: 0; height: 32px; line-height: 32px; display: block; width: 100%; opacity: 0; filter: alpha(opacity=0); } .btn { background-color: #dc7d1f; height: 34px; line-height: 34px; color: #fff0c5; width: 60px; text-align: center; margin-left: 2px; cursor: pointer; } </style> </head> <body> <div class="box_wrapper"> <div class="box"> <div class="public_sel J_public_sel"> <span>选择星座</span> <select class="sel" name="xz1"> <option value="" selected="selected" style="display: none;">选择星座</option> <option value="男羊座">男白羊座</option> <option value="金牛座">男金牛座</option> <option value="双子座">男双子座</option> <option value="巨蟹座">男巨蟹座</option> <option value="狮子座">男狮子座</option> <option value="处女座">男处女座</option> <option value="天秤座">男天秤座</option> <option value="天蝎座">男天蝎座</option> <option value="射手座">男射手座</option> <option value="摩羯座">男摩羯座</option> <option value="水瓶座">男水瓶座</option> <option value="双鱼座">男双鱼座</option> </select> </div> <div class="public_sel J_public_sel"> <span>女白羊座</span> <select class="sel" name="xz2"> <option value="白羊座">女白羊座</option> <option value="金牛座">女金牛座</option> <option value="双子座">女双子座</option> <option value="巨蟹座">女巨蟹座</option> <option value="狮子座">女狮子座</option> <option value="处女座">女处女座</option> <option value="天秤座">女天秤座</option> <option value="天蝎座">女天蝎座</option> <option value="射手座">女射手座</option> <option value="摩羯座">女摩羯座</option> <option value="水瓶座">女水瓶座</option> <option value="双鱼座">女双鱼座</option> </select> </div> <button class="btn">配对</button> </div> <div class="box"> <div class="public_sel J_public_sel"> <span>男白羊座</span> <select class="sel" name="xz1"> <option value="男羊座">男白羊座</option> <option value="金牛座">男金牛座</option> <option value="双子座">男双子座</option> <option value="巨蟹座">男巨蟹座</option> <option value="狮子座">男狮子座</option> <option value="处女座">男处女座</option> <option value="天秤座">男天秤座</option> <option value="天蝎座">男天蝎座</option> <option value="射手座">男射手座</option> <option value="摩羯座">男摩羯座</option> <option value="水瓶座">男水瓶座</option> <option value="双鱼座">男双鱼座</option> </select> </div> <div class="public_sel J_public_sel"> <span>女白羊座</span> <select class="sel" name="xz2"> <option value="白羊座">女白羊座</option> <option value="金牛座">女金牛座</option> <option value="双子座">女双子座</option> <option value="巨蟹座">女巨蟹座</option> <option value="狮子座">女狮子座</option> <option value="处女座">女处女座</option> <option value="天秤座">女天秤座</option> <option value="天蝎座">女天蝎座</option> <option value="射手座">女射手座</option> <option value="摩羯座">女摩羯座</option> <option value="水瓶座">女水瓶座</option> <option value="双鱼座">女双鱼座</option> </select> </div> <button class="btn">配对</button> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".J_public_sel select").change(function(){ var sel_txt = $(this).find("option:selected").text(); $(this).parent().children(".J_public_sel span").text(sel_txt); }) }) </script> </body> </html>
注意:当“选择星座”没有加这个样式<option value="" selected="selected" style="display: none;">选择星座</option>就好出现第一个选择不到
效果图:
相关文章
- jquery 中获取所有选中的checkbox的用法
- js jquery - 获取元素(父节点,子节点,兄弟节点),元素筛选 (转载)
- jQuery框架分析第一章: 第一个匿名函数
- jQuery实现判断li的个数从而实现其他功能
- 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件
- jquery获取radio值
- jquery获取含有某元素的的控件 “控件名[属性名=值]”
- electron 关于jquery不可以用
- jquery 获取鼠标位置
- jquery 根据name获取元素的问题
- 用jquery-table2excel,进行导出excel
- jQuery图片延迟加载插件:jquery.lazyload
- js jquery vue 网络请求封装 服务器 后台
- jquery 的 ajax 传输 数组 ,但后台无法获取的 原因 与 解决 办法
- jquery获取select多选框选中的值
- jquery获取单选button选中的值
- “checkbox”和“select”对象在javascript和jquery的操作差异做了整理
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连续7-电话问卷调查
- python web py入门(51)- jQuery - $("").next()获取同级的下一个元素
- jQuery 获取元素当前位置offset()与position()
- 扩展jquery插件的方式
- jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)