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被选中的文本值,是这样写的 ...
随机推荐
- Python面向对象相关知识1
1. python是动态的语言,这样在使用类的时候,类的属性就可以随意的添加,但是这样在实际开发中有一定的缺陷,所以,可以在类中定义一个特殊的__init__()方法,当创建实例时,__init__( ...
- Linux实战教学笔记19:Linux相关网络知识梳理
第十九节 Linux相关网络知识梳理 标签(空格分隔): Linux实战教学笔记-陈思齐 一,前言 一个运维有时也要和网络打交道,所以具备最基本的网络知识,对一个运维人员来说是必要的.但,对于我们的工 ...
- EMC存储同时分配空间到两台服务器路径不一致-双机盘符不一致
以下方式将i盘盘符换成g盘,g盘盘符换成i emcpadm rename -s emcpoweri -t emcpowerj emcpadm rename -s emcpowerg -t emcpow ...
- div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...
- 一张图片优化5k带来的带宽成本及其前端页面的优化方法
上周,我参加了公司的一门课程<网站性能优化>,讲师提出了一个问题:一张图片优化后减少5K,1年内可以大概省下多少宽带成本呢?非常好奇,仔细听完讲师分析,计算出来的数据让小伙伴们都惊呆了,仅 ...
- Apache Hive （七）Hive的DDL操作
转自:https://www.cnblogs.com/qingyunzong/p/8723271.html 库操作 1.创建库 语法结构 CREATE (DATABASE|SCHEMA) [IF NO ...
- VS2017在Release下编译错误C1001
在使用VS2017编译C程序时,Debug模式下编译链接执行都没有问题,但是一转到Release模式下就出现下列编译链接错误(IDE:VS2017 /VC++/MFC程序,目标平台x86+Win32位 ...
- ubuntu14.04安装chromium以及flash插件
之前找了好几个方法都不还用,今天突然发现,还挺简单的.命令如下: sudo apt-get updatesudo apt-get install chromium-browser#sudo add-a ...
- msyql中子查询IN，EXISTS，ANY，ALL，SOME，UNION介绍
1.ANY关键字 假设any内部的查询语句返回的结果个数是三个,如:result1,result2,result3,那么, select ...from ... where a > any(.. ...
- IO引脚复用和映射
1.端口复用 这些外设包括ADC,DAC以及串口等等. 查找STM32F429数据手册可以找到相关IO口的复用功能引脚. 注意:除ADC和DAC要配置成模拟通道外,其他的所有外设都要配置成复用功能.