七武海

要的效果参考网址

1. http://www.jb51.net/css/75935.html

复制代码

要的结果就是多选，能根据不同的搜索条件来分开搜索


这代码整合后有点问题，还有就是，我要的是UTF-8编码，

这是我最终要的效果，根据这个分开来搜索，所以，

大神，看在我菜鸟的份上，能不能整一份傻瓜式的UTF-8全套代码给我，是全套都在一个页面，一个HTML代码页面给我，（里面直接CSS和script）分不多，心意而已，三克油！！！！！！

dr21c

<style type="text/css">
#sBar { height: 42px; position: relative; z-index: 1; overflow: visible; padding-left: 60px;}
#sBar .sTxt { position: absolute; z-index: 99; width: 60px; text-align: center; left: 0px; border: 1px solid #dedede; line-height: 40px; height: 40px;}
#sBar ul { position: absolute; z-index: 99; width: 60px; text-align: center; left: 0px; top: 40px; border: 1px solid #dedede; line-height: 40px; display: none;}
.inp { border: 1px solid #dedede; float: left; height: 40px; width: 200px;}
.sub { border: 0px; background: #dedede; float: left; height: 42px; width: 60px;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript">
        $(function(){
                $(".sTxt").click(function(){
                        $(this).siblings("ul").slideDown(300);
                });
                $("#sBar ul li").bind("click",function(){
                        var data = $(this).data("type");
                        var txt = $(this).html();
                        $("#sType").val(data);
                        $(".sTxt").html(txt);
                        $(this).parent().slideUp(300);
                });               
        });

</script>
<div id="sBar">       
        <form action="" method="post" name="form1">
                <div class="sTxt">全部</div>
                <ul>
                        <li data-type="0">全部</li>
                        <li data-type="1">作品</li>
                        <li data-type="2">作者</li>
                </ul>
                <input type="text" name="keyword" class="inp" value="" />
                <input type="submit" name="submit" class="sub" value="搜索" />
                <input type="hidden" name="type" value="0" id="sType" />
        </form>
</div>


样式自己搞，

dr21c

这种难度，全落伍也只有我能做出来了，朕就不可客气了啊，

七武海

dr21c 发表于 2015-7-7 00:35
#sBar { height: 42px; position: relative; z-index: 1; overflow: visible; padding-left: 60px;}
#sB ...

很感谢哥们做出的这个，只是我的基础太差，以至于还无法把你的这段代码改成我所需要的，谢谢，辛苦了

1. http://www.niviachy.com/page/authorize.html

复制代码

这个是我最终要的效果，接收页已做好，就是查询页三个查询条件合一个搜索框做不来

1. 
   
2. <ul>
   
3. <li><a href="#" value="0">手机号</a></li>
   
4. <li><a href="#" value="1">身份证</a></li>
   
5. <li><a href="#" value="2">手机号</a></li>
   
6. </ul>
   

复制代码

感谢！