点击链接出现下拉框再点击消失

walterforjava 2011-09-14 03:42:51

小弟最近工作了，工作有很多东西要学习，第一次上CSDN，先向大家问个好，(*^__^*) 嘻嘻……

点击链接出现下拉框，再点击链接或链接以外的地方，下拉框消失
下拉框内的内容能选择，选择以后给文本框赋值
代码：



  <form action="/search" id="apf_id_6_form" method="get">

		          <div class="select_cont">

	    	           <a href="javascript:show();" class="select">找二手房</a>

	              </div>

	              <ul class="select_list" style="display:none" id="select_list_apf_id_6">

	    		    		<li rel="1"><span>找二手房</span></li>	        	    		

							<li rel="2"><a href="javascript:set();">找租房</a></li>	        	    		

							<li rel="3"><a href="javascript:set();">找小区</a></li>	        	    		

							<li rel="4"><a href="javascript:set();">找经纪人</a></li>	        	    		

							<li rel="8"><a href="javascript:set();">找问答</a></li>	        	    

				  </ul>

	    <input type="text" id="keyword_apf_id_6" value="请输入房源特征,地点或小区名..."

		 class="input_text" name="k"  maxlength="100" onfocus="cls()" onblur="res()"/>

	    <input type="submit" value="搜索" id="sbtn2_apf_id_6" class="input_button se_house">

	    </form>

单击链接“找二手房” 出现下拉框select_list_apf_id_6 ，当点击下拉框内的选项，keyword_apf_id_6的值会改变

...全文

518 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

buliar 2011-09-15

打赏
举报

看描述好像手绘一个select，看代码又不明白了汗

「已注销」 2011-09-15

打赏
举报

jquery:toggle（fn,fn）

峭沙 2011-09-14

打赏
举报

<select>才叫下拉框。。你这种需要用<ul>有点不伦不类的

<!DOCTYPE html>

<html>

    <head>

	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	    <title>test</title>

	    <script type="text/javascript" src="jquery.js"></script>

    </head>

    <body>

		  <form action="search" id="apf_id_6_form" method="get">

                  <div class="select_cont">

                       <a href="#" class="select">找二手房</a>

                  </div>

                  <ul class="select_list" style="display:none" id="select_list_apf_id_6">

                            <li rel="1"><span>找二手房</span></li>                            

                            <li rel="2"><a href="#">找租房</a></li>                            

                            <li rel="3"><a href="#">找小区</a></li>                            

                            <li rel="4"><a href="#">找经纪人</a></li>                            

                            <li rel="8"><a href="#">找问答</a></li>                    

                  </ul>

        <input type="text" id="keyword_apf_id_6" value="请输入房源特征,地点或小区名..."

         class="input_text" name="k"  maxlength="100"/>

        <input type="submit" value="搜索" id="sbtn2_apf_id_6" class="input_button se_house">

        </form>

        <script>

        	$(function(){

        		var is_show = false,

        			$ul = $('#select_list_apf_id_6'),

        			$input = $('#keyword_apf_id_6');

        		$('a.select').click(function(){

        			if(!is_show){

        				$ul.show();

        				is_show = true;

        				return false;

        			}

        		});

        		$(document).click(function(){

        			if(is_show){

        				is_show = false,

        				$ul.hide();

        			}

        		});

        		$ul.click(function(event){

        			var target = $(event.target);

        			if(!target.is(this)){

        				$input.val(target.text());

        			}

        		});

        	});

        </script>

	</body>

</html>

BLUE_LG 2011-09-14

打赏
举报

[Quote=引用 10 楼 asdl7878 的回复:]
你那个貌似不是下拉框下拉框是select吧但是你那个可以在<A>里调用一个这样的方法
function changeText(){
document.getElementById('你想改变文本内容的文本框ID').value="你想变成的文本内容";
}
[/Quote]++

asdl7878 2011-09-14

打赏
举报

你那个貌似不是下拉框下拉框是select吧但是你那个可以在<A>里调用一个这样的方法
function changeText(){
document.getElementById('你想改变文本内容的文本框ID').value="你想变成的文本内容";
}

walterforjava 2011-09-14

打赏
举报

哦谢谢了
还有一个功能不知道怎么实现
在下拉框中点击"找租房，找小区“这些选项的时候，如何使<input type="text" id="keyword_apf_id_6" value="请输入房源特征,地点或小区名...">
的value改变？

asdl7878 2011-09-14

打赏
举报

就是链接的onclick(或者onfocus) onblur事件在事件触发时对制定的控件进行显示或隐藏的操作代码是手敲的没验证不知道是不是你要的效果

asdl7878 2011-09-14

打赏
举报

哦这个意思啊
<a href="javascript:show();" class="select" onblur="hide()">找二手房</a>
<script>
var obj=document.getElementById('select_list_apf_id_6');

function hide(){

obj.style.display='none';

}
function show(){

obj.style.display='block'
}
</script>
}

三石-gary 2011-09-14

打赏
举报

[Quote=引用 5 楼 walterforjava 的回复:]

点击链接消失了但是点击页面的其它地方下拉框还在啊
[/Quote]

这样的话你可以写鼠标事件。。当鼠标放上去的时候出现下拉。。离开的时候隐藏。

walterforjava 2011-09-14

打赏
举报

点击链接消失了但是点击页面的其它地方下拉框还在啊

asdl7878 2011-09-14

打赏
举报

show(){
var obj=document.getElementById('select_list_apf_id_6');
if(obj.style.display=='none'){
obj.style.display='block'
}
if(obj.style.display=='block'){
obj.style.display='none'
}
}

asdl7878 2011-09-14

打赏
举报

LZ敢用SELECT么

walterforjava 2011-09-14

打赏
举报

可能我说的不太明白
点击<a href="javascript:;" class="select">找二手房</a>这个链接
要弹出下拉框<ul class="select_list" style="display:none" id="select_list_apf_id_6">
<li rel="1"><span>找二手房</span></li>
<li rel="2"><a href="javascript:set();">找租房</a></li>
<li rel="3"><a href="javascript:set();">找小区</a></li>
<li rel="4"><a href="javascript:set();">找经纪人</a></li>
<li rel="8"><a href="javascript:set();">找问答</a></li>
</ul>

第二次点击这个链接或页面的其他地方，下拉框要消失。