取值再拼接跳转链接

Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取值再拼接跳转链接</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sel">
    <div class="public_sel J_public_sel public_sel_w90" >
        <span>白羊座</span>
        <select id="cesuan_select">
            <option value="1" selected="selected">白羊座</option>
            <option value="2">金牛座</option>
            <option value="3">双子座</option>
            <option value="4">巨蟹座</option>
            <option value="5">狮子座</option>
            <option value="6">处女座</option>
            <option value="7">天秤座</option>
            <option value="8">天蝎座</option>
            <option value="9">射手座</option>
            <option value="10">摩羯座</option>
            <option value="11">水瓶座</option>
            <option value="12">双鱼座</option>
        </select>
    </div>
    <div class="public_sel J_public_sel public_sel_w90" >
        <span>今日运势</span>
        <select id="cesuan_yunshi">
            <option value="today" selected="selected">今日运势</option>
            <option value="tomorrow">明日运势</option>
            <option value="week">本周运势</option>
            <option value="month">本月运势</option>
            <option value="year">本年运势</option>
            <option value="love">爱情运势</option>
        </select>
    </div>
    <a id="yunshi_xingzuo" href="javascript:;" class="btn">查询</a>
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //快速测算
        $("#yunshi_xingzuo").click(function () {
            var sxval = $("#cesuan_select").val();
            var ysval = $("#cesuan_yunshi").val();
            var url="/xingzuo/"+sxval+"/"+ysval+".html";
            window.location.href = url;
        });
        //公共下拉框select
        $(".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>

css代码：

/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ,textarea { margin:0; padding:0;  }
address,cite,dfn,em,var, i {font-style:normal;}
body {font-size: 14px; line-height: 1.5; font-family:'Microsoft Yahei','simsun','arial','tahoma';  color: #4a4a4a; background:#fffaeb url(../images/bg_body.jpg) repeat-x; }
table { border-collapse:collapse; border-spacing:0; }
h1, h2, h3, h4, h5, h6, th { font-size: 100%; font-weight: normal; }
button,input,select,textarea{font-size:100%;}
fieldset,img{border:0;}
a { text-decoration: none; color: #4a4a4a; background: none }
ul, ol { list-style: none; }
:focus{ outline:none;}

.fl{ float: left; }
.fr{ float: right; }


/*公共select*/
.public_sel{ position: relative; float: left; }
.public_sel span{ display:inline-block; height: 34px; line-height: 34px; border:1px solid #cdbe93; background: #fae3a5 url(icon_sel.png) no-repeat 95% center; padding: 0 5px; }
.public_sel select{ position: absolute; left: 0; top:0;  height: 34px; opacity: 0; filter:alpha(opacity=0); }
.public_sel_w90 span{ width: 90px; }
.public_sel_w90 select{ width: 100px; }

.btn{display: inline-block;height: 36px;line-height: 36px;background-color: #dc7d1f;color: #fff0c5;font-size: 16px;padding: 0 10px;margin-left: 5px; border:0; cursor: pointer;}

效果图：

查询结果路径：

 

posted @ 2017-06-15 18:37  前端HL  阅读(528)  评论(0)  编辑  收藏  举报