pc端美化select，jquery获取select中的option的text值
代码：
<!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>就好出现第一个选择不到
效果图：
pc端美化select，jquery获取select中的option的text值的更多相关文章
- Jquery 获取table中的td元素的值
<table id="t1"> <tr> <td> 1-1 </td> <td> 1-2 </td> < ...
- Jquery获取select,dropdownlist,checkbox下拉列表框的值
jQuery获取 Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); ...
- jQuery获取Select选择的Text和 Value(转)用时比较方便寻找
---恢复内容开始--- jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code. ...
- jQuery获取Select选择的Text和 Value(转)
radio: radio: var item = $('input[name=items][checked]').val(); var item = $('input[name=items]:chec ...
- jQuery获取Select选择的Text和 Value
jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...}); //为Se ...
- jQuery获取Select选择的Text(非表单元素)和 Value（表单元素）(转)
jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...
- jQuery获取Select选择的Text和Value
jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...}); //为S ...
- jQuery获取Select选择的Text和 Value(转，待测试确认)
在自己写的第一个小项目的省市区联动的时候需要用到select,找到这篇文章.实在是觉得太好了,忍不住转过来.待日后测试后再修改整理次文章. 下面是文章原文 jQuery获取Select选择的Text和 ...
- jquery获取select选中的值
http://blog.csdn.net/renzhenhuai/article/details/19569593 误区: 一直以为jquery获取select中option被选中的文本值,是这样写的 ...
随机推荐
- 火狐浏览器的RestClient,接口测试，Post提交数据
昨天需要测试接口是不是调通,api中本身已经集成了测试,但加了OAuth,api有没有添加头文件,Headers的地方,所以想用RESTClient的Post提交重新测试下,但是,调了好几个小时都没有 ...
- 前端开发之javascript BOM篇
主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性 前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Bro ...
- centos7 时间修改
转子 http://blog.csdn.net/kuluzs/article/details/52825331 在CentOS 6版本,时间设置有date.hwclock命令,从CentOS 7开始, ...
- 《Head First 设计模式》观后感——专业并不一定是深奥和枯燥
<Head First 设计模式>观后感——专业并不一定是深奥和枯燥 说起设计模式,我想做程序的朋友都不会感到陌生,这就像是软件里的缩写一样,可以快速的表达一系列的意思. 但是纵观市面上的 ...
- DBArtist之Oracle入门第2步: 了解Oracle的Database Control
之前安装好数据库后,会有下面这个弹窗,然后根据Database Control URL地址进入瞧一瞧,看一看! 根据地址进入以后,是一个登录界面,用system账户登录,密码就是安装Oracle的时候 ...
- 关于@property与@syntheszie的使用问题
写在前面:在ARC大行其道的“现代化社会”,不少人不再对“完整的“OC”抱有它应该获得的尊重,于是浮躁成了代名词~~ 在使用ARC时,大家声明变量的过程中,往往使用@property来通过编译器,隐式 ...
- tomcat安装后,双击start.bat闪退的问题
1.jdk环境变量没有配 解决方案:我的电脑-属性-高级-环境变量,新增下面三个环境变量: ①JAVA_HOME=C:\Program Files\Java\jdk1.7.0_09(就是你jdk安装的 ...
- avalonjs 笔记
1>复选卡框和单选框 复选卡框 监控已选框的数组,即通过属性监控来判断是否全选 <div ms-controller="test"> <ul> < ...
- 移动端flexbox的小tips
我也是看了腾讯isux的博客,解答了我关于flexbox一个很长时间的疑惑,就是flex布局在安卓手机会出现内容长短不同导致不均分的现象. 具体的内容可以去看腾讯isux的博客,地址在这:https: ...
- Boost::split用法详解
工程中使用boost库:(设定vs2010环境)在Library files加上 D:\boost\boost_1_46_0\bin\vc10\lib在Include files加上 D:\boost ...