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被选中的文本值,是这样写的 ...
随机推荐
- C# Common Keyword II
[C# Common Keyword II] 1.as 运算符用于在兼容的引用类型之间执行某些类型的转换. class csrefKeywordsOperators { class Base { pu ...
- Spark分布式计算执行模型
引言 相对Hadoop, Spark在处理需要迭代运算的机器学习训练等任务上有着很大性能提升,同时提供了批处理.实时数据处理.机器学习以及图算法等一站式的服务,因此最近大家一起来学习Spark,特别是 ...
- python中函数作用域
在python中,一个函数就是一个作用域 name = 'xiaoyafei' def change_name(): name = 'sthu' print('在change_name里的name:' ...
- 15- 1 << k 时的益出
扩展GCD-时间复杂性 题目: 计算循环语句的执行频次 for (i = A; i != B; i += C) x += 1;其中A, B, C, i都是k位无符号整数. 输入: A B C k, 其 ...
- C++ std::unordered_multiset
std::unordered_multiset template < class Key, // unordered_multiset::key_type/value_type class Ha ...
- 在git bash中使用命令行调用tortoisegit提交代码或查看日志
Tortoisegit commit / show log命令行 TortoiseGitProc.exe /command:commit TortoiseGitProc.exe /command:lo ...
- HBase预分区方法
(what)什么是预分区? HBase表在刚刚被创建时,只有1个分区(region),当一个region过大(达到hbase.hregion.max.filesize属性中定义的阈值,默认10GB)时 ...
- mysql 空间索引的使用
CREATE TABLE tb_geo(id INT PRIMARY KEY AUTO_INCREMENT,NAME VARCHAR(128) NOT NULL,pnt POINT NOT NULL, ...
- Integer中getInteger（），valueof（）
Integer类有两个看起来很类似的静态方法,一个是Integer.getInteger(String),另外一个是Integer.valueOf(String).如果只看方法名称的话,很容易将这两个 ...
- React Native开发环境的搭建
我只能说搭建开发环境还是不能相信网上纷乱的博客,还是中文网靠谱. http://reactnative.cn/docs/0.47/getting-started.html 纯粹只是为了记录一下.