小练习 根据选项搜索
效果：
1 <style type="text/css">
2 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, th, td{ margin: 0;padding: 0;border:none;}
3 .search .border {margin-right:0px;
4 width:288px;
5 height:32px;
6 margin-right:10px;
7 border:1px solid #ddd;
8 background:#fff;}
9
10 .search .lanmu {
11 position:relative;
12 float:left;
13 width:60px;
14 height:32px;
15 border-right:1px solid #ccc;
16 font-size:12px;
17 }
18 .search .lanmu i {
19 position:absolute;
20 left:9px;
21 top:14px;
22 width:7px;
23 height:4px;
24 background:url(images/forumicon2.gif) no-repeat 0 -223px;
25 }
26 .search .lanmu .down {
27 display:none;
28 cursor:pointer;
29 position:absolute;
30 width:60px;
31 line-height:26px;
32 left:-1px;
33 top:32px;
34 text-align:center;
35 border:1px solid #ccc;
36 background:#fff;
37 }
38 .search .lanmu .down li:hover {
39 background:#5cb82b;
40 color:#fff;
41 }
42 .search .lanmu span {
43 cursor:pointer;
44 padding-left:25px;
45 line-height:32px;
46 }
47 .search .input {
48 float:left;
49 width:185px;
50 padding:0 5px;
51 height:32px;
52 line-height:32px;
53 }
54 .search .sub {
55 float:left;
56 width:32px;
57 height:32px;
58 background:url(images/forumicon2.gif) no-repeat 0 -41px;
59 }
60 .search .btn-down,.btn-down{
61 float:left;
62 position:relative;
63 width:100px;
64 height:32px;
65 line-height:32px;
66 text-align:center;
67 color:#fff;
68 background:#5bb72b;
69 border:1px solid #5ab42a;
70 font-size:14px;
71 }
72 </style>
CSS样式
1 <script type="text/javascript">
2 $(function(){
3 if($("#qty").val()=="帖子")
4 {
5 $(".lanmu span").html("<i></i>"+$("#litopic").text());
6 $(".lanmu span").next().hide().removeClass(‘downshow‘);
7 }
8 else if($("#qty").val()=="新闻")
9 {
10 $(".lanmu span").html("<i></i>"+$("#litopic").text());
11 $(".lanmu span").next().hide().removeClass(‘downshow‘);
12 }
13 $(".lanmu span").click(function(event){
14 var _that = $(this);
15 _that.next().toggle().toggleClass(‘downshow‘);
16 $("#litopic").click(function(){
17 $("#qty").val("帖子");
18 _that.html("<i></i>"+$(this).text());
19 _that.next().hide().removeClass(‘downshow‘);
20 });
21 $("#linews").click(function(){
22 $("#qty").val("新闻");
23 _that.html("<i></i>"+$(this).text());
24 _that.next().hide().removeClass(‘downshow‘);
25 });
26 event.stopPropagation();
27 })
28 //空白点击关闭下拉
29 $(document).click(function(){
30 var $down = $(‘.lanmu .down‘);
31 if($down.hasClass(‘downshow‘)){
32 $down.hide().removeClass(‘downshow‘);
33 }
34 })
35 });
36 function Search()
37 {
38 var tb= document.getElementById("txtname").value;
39 if(tb=="请输入搜索的内容"||tb.replace(/(^\s*)|(\s*$)/g, "")=="")
40 {
41 document.getElementById("txtname").value="";
42 alert("请输入搜索的内容！");
43 return;
44 }
45 var hqty=document.getElementById("qty").value
46 if(hqty=="帖子")
47 {
48 window.location.href="A.aspx?t=2&title="+escape(tb);
49 }
50 else if(hqty=="新闻")
51 {
52 window.location.href="B.aspx?t=2&name="+escape(tb);
53 }
54 return;
55 }
56
57 function show_select(input,btn,option,value){
58 inputobj=document.getElementById(input);
59 btnobj=document.getElementById(btn);
60 optionobj=document.getElementById(option);
61 valueobj=document.getElementById(value);
62 optionobj.style.display=optionobj.style.display==""?"none":"";
63 optionobj.onblur=function () {
64 optionobj.style.display="none";
65 }
66
67 for (var i=0;i<optionobj.childNodes.length;i++){
68 optionobj.focus();
69 optionobj.childNodes[i].onmouseover=function (){
70 this.className="itemsover";
71 }
72 optionobj.childNodes[i].onmouseout=function (){
73 this.className="itemsout";
74 }
75 optionobj.childNodes[i].onclick=function () {
76 //alert(this.innerHTML)
77 inputobj.innerHTML=this.innerHTML;
78 valueobj.value=this.innerHTML;
79 optionobj.blur();
80 optionobj.style.display="none";
81 if (input=="pro_color"){
82 loadpic(this.id,"");
83 }
84 }
85 }
86 }
87 </script>
Jquery
1 <div class="search">
2 <div class="border">
3 <div class="lanmu">
4 <span ><i></i>帖子</span>
5 <ul class="down">
6 <li id="litopic">帖子</li>
7 <li id="linews">新闻</li>
8 </ul>
9 </div>
10 <input id="txtname" type="text" class="input" onkeydown="(function(e){if(!e) e=window.event;switch (e.keyCode|e.which|e.charCode){case 13:Serach();break;}})(event);"/>
11 <input id="Button1" type="button" class="sub" value="" title="搜索" onclick="Search" style="cursor: pointer"/>
12 <input name="qty" type="hidden" id="qty" value="帖子"/>
13 </div>
14 </div>
html
时间： 2024-10-09 19:50:22