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被选中的文本值,是这样写的 ...
随机推荐
- MySQL数据库篇之索引原理与慢查询优化之二
接上篇 7️⃣ 正确使用索引 一.索引未命中 并不是说我们创建了索引就一定会加快查询速度,若想利用索引达到预想的提高查询速度的效果, 我们在添加索引时,必须遵循以下问题: #1 范围问题,或者说条件 ...
- python要点之III
[python要点之III] 1.实现交换. 在C/C++中,交换两个变量,需要2个变量,tmp=x;x=y;y=tmp;. 在python中,交换两个变量可以这么写:x,y=y,x. 2.is&am ...
- 28-Truck History（poj1789最小生成树）
http://poj.org/problem?id=1789 Truck History Time Limit: 2000MS Memory Limit: 65536K Total Submiss ...
- spring.net 继承
. <object id="parent" type="Bll.Parent, HRABLL" > <property name=" ...
- 关于更新vs2017后发布的问题 命令“bower install”已退出，代码为 9009
更新vs2017 尝试发布 出现 命令“bower install”已退出,代码为 9009 然后我点工具测试了一下nodejs 出现下图弹窗 百度了一下 没找到对策,有没有大侠知道怎么解决 解决 ...
- 白盒测试实践项目（day5）
在这几天的工作下,小组成员都基本完成了各自所负责的内容. 李建文同学完成提交了代码复审相关文档后,也经过小组的补充,彻底完成. 汪鸿同学使用FIndBugs工具完成了静态代码的测试,并且也完成了静态代 ...
- Linux Basic学习笔记01
介绍课程: 中级: 初级:系统基础 中级:系统管理.服务安全及服务管理.Shell脚本: 高级: MySQL数据库: cache & storage 集群: Cluster lb: 4laye ...
- [GO]面向对象和面对过程的方式
package main import ( "fmt" ) //这里为面向过程的方式 func Add(a, b int) int { return a + b } //面向对象, ...
- [GO]结构体的值传递和地址传递
package main import "fmt" type student struct { id int name string sex byte age int addr s ...
- HDU 6005 Pandaland (Dijkstra)
题意:给定一个图,找出一个最小环. 析:暴力枚举每一条,然后把边设置为最大值,以后就不用改回来了,然后跑一遍最短路,跑 n 次就好. 代码如下: #pragma comment(linker, &qu ...