高分求个js写的下拉列表中的滚动条

宿州阿里郎 2016-10-14 03:10:44

就是一个下拉框控制一定的高度，人后显示出滚动条。好像不用js做不出那个效果。ie8兼容才可以啊。

...全文

238 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

宿州阿里郎 2016-10-18

打赏
举报

公司的网传不了图片，简单说下，主要就是点击input框显示下拉框内容，选中后隐藏掉ul。点击ul以为的地方也可以隐藏ul。

宿州阿里郎 2016-10-18

打赏
举报

上面的window.onload = function() 部分出现个bug，刚进页面点击第一次li的时候不走for里面了。下面重新改了下script代码：

<script type="text/javascript">

window.onload = function(){
//显示ul	
	$("#inp").click(function(e){
        $("#ull").show();
        var ev = e || window.event;
        if(ev.stopPropagation){
            ev.stopPropagation();
        }
        else if(window.event){
            window.event.cancelBubble = true;//兼容IE
        }
});

//点别ul以外的地方就隐藏ul
document.onclick = function(e){
                e = e || window.event;//兼容IE
                var dom =  e.srcElement|| e.target;//兼容IE
                if(dom.id != "ull" && document.getElementById("ull").style.display == "block") {
                    document.getElementById("ull").style.display = "none";
                }
            };
            
//选中li值后隐藏ul          
        var inp = document.getElementById("inp");
		var ull = document.getElementById("ull").getElementsByTagName("li");
		for(var i=0;i<ull.length;i++){
		ull[i].onclick = function(){
		inp.value= this.value;
		document.getElementById("ull").style.display="none";

	};
		}
}
</script>

宿州阿里郎 2016-10-18

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的简历</title>
<script type="text/javascript" src="${ctx}/commons/scripts/jquery.js"></script>
<script type="text/javascript" src="${ctx}/commons/scripts/validator.js"></script>
<script type="text/javascript" src="${ctx}/commons/scripts/scrollbar.js" ></script>
<link href="style/global.css" rel="stylesheet" type="text/css"
</head>
<style>
	#iv{width:200px;height: 500px;}
	#inp{width:150px;heigth:10px;border:solid 1px #ccc;}
	#ull{height: 200px;width:150px;overflow-y:scroll;display:none; 
		margin:0;
		padding:0;
		list-style:none;}
	#ull li{cursor:default;
		width:130px;
		height:32px;
		line-height:32px;
		}
	#ull li:HOVER {color:red;}
		
</style>
<body>

<div id="iv">
		
	<input id="inp" value="" >
		<ul id="ull" >
			<li value="1" >1</li>
			<li value="2" >2</li>
			<li value="3" >3</li>
			<li value="4" >4</li>
			<li value="5" >5</li>
			<li value="6" >6</li>
			<li value="7" >7</li>
			<li value="8" >8</li>
			<li value="9" >9</li>
		</ul>
	</input>
</div>	
	
</body>

<script type="text/javascript">
	
	$("#inp").click(function(e){
        $("#ull").show();
        var ev = e || window.event;
        if(ev.stopPropagation){
            ev.stopPropagation();
        }
        else if(window.event){
            window.event.cancelBubble = true;//兼容IE
        }
});

window.onload = function(){
document.onclick = function(e){
                e = e || window.event;//判断ie
                var dom =  e.srcElement|| e.target;
                
                if(dom.id != "ull" && document.getElementById("ull").style.display == "block") {
                    document.getElementById("ull").style.display = "none";
                    var inp = document.getElementById("inp");
					var ull = document.getElementById("ull").getElementsByTagName("li");
					for(var i=0;i<ull.length;i++){
					ull[i].onclick = function(){
						inp.value= this.value;
						document.getElementById("ull").style.display="none";

	};
		}
                }
            };
}
</script>
</html>