代码：
<!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>就好出现第一个选择不到
效果图：
