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被选中的文本值,是这样写的 ...
随机推荐
- Spring IOC的配置使用
1.1.1 XML配置的结构一般配置文件结构如下: <beans> <import resource=”resource1.xml” /> <bean id=”bean1 ...
- System.Web.Mvc.Html 命名空间小计
1,Html.Action 使用指定参数调用指定子操作方法并以 HTML 字符串形式返回结果. 1 <div id="HtmlAction"> 2 3 @Html ...
- apt 查询软件
apt-cache search percona-server apt list percona-server-server-5.6
- 32. Longest Valid Parentheses （Stack； DP）
Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...
- redis 面试题1 有用
1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.Reids的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库 ...
- python用sqlite3模块操作sqlite数据库-乾颐堂
SQLite是一个包含在C库中的轻量级数据库.它并不需要独立的维护进程,并且允许使用非标准变体(nonstandard variant)的SQL查询语句来访问数据库. 一些应用可是使用SQLite保存 ...
- [Training Video - 3] [Groovy in Detail] Non-static and Static variables, objects and object referances
log.info "starting" // we use class to create objects of a class Planet p1 = new Planet() ...
- json日期格式话
// 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占 ...
- JS中的唯一容器：数组
JS中的唯一容器:数组 一.什么类型的数据都可以存储 二. 定义的方式有两种 1 . var arra=[];var arra=[“a”,“b”,"c"]; 2.v ...
- 重定向和请求转发后面加“return；”语句
请求转发 RequestDispatcher 重定向 Redirect 代码的执行: 无论是 request.getRequestDispatcher(path).forward(reque ...