JSP下拉多选

最新推荐文章于 2024-06-19 09:33:02 发布

ghost1000

最新推荐文章于 2024-06-19 09:33:02 发布

阅读量646

点赞数

文章标签： JSP HTML

本文链接：https://blog.csdn.net/ghost1000/article/details/83664340

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <div style="width:400px;text-align:left;">
<div style="position:absolute">
<input type="text" id="inputcolumn" onKeyUp="showcolumn();" onFocus="testonfouce();" onBlur="testonblur();" style="width:200px;border:1px solid #cccccc;" border="0"/>&nbsp;&nbsp;
</div>
  <div id="allcolumns" style="margin-top:23px;z-index:102;display:none;position:absolute;background-color:#FFFFFF;border:1px solid #cccccc;width:200px;overflow-y:auto;" onMouseOver="divonfouce();"  onMouseOut="divonblur();">
<div value="/col/col92581/index.html" style="background-color:#efefef;border-bottom:1px solid #FFFFFF;height:200px;cursor:hand;" οnclick="setInputcolumn(this)">
<input     type=checkbox     value=checkbox1     value="1"> 111<br/>
  <input     type=checkbox     value=checkbox1     value="2">  222 <br/>
  <input     type=checkbox     value=checkbox1     value="3">  333   <br/>
  <input     type=checkbox     value=checkbox1     value="4"> 4444<br/>
  <input     type=checkbox     value=checkbox1     value="5">  555  <br/>
  <input     type=checkbox     value=checkbox1     value="6">  666 <br/>
</div>
</div>
</div>

 </BODY>
 <script>
 var inputtext = false;
var allcolumnsover = false;
 function testonfouce(){
	inputtext = true;
	showorhidden();
	showcolumn();
}
function testonblur(){
	inputtext = false;
	showorhidden();
}
function divonfouce(){
	allcolumnsover = true;
	showorhidden();
}
function divonblur(){
	allcolumnsover = false;
	showorhidden();
}

function showorhidden(){
	if (inputtext | allcolumnsover){
		document.getElementById('allcolumns').style.display='';
	}else{
		document.getElementById('allcolumns').style.display='none';
	}
}
 function showcolumn(){
	var value = document.getElementById("inputcolumn").value;
	var allcolumns = document.getElementById("allcolumns").childNodes;
	var temp = 0;
	for (var i=0;i<allcolumns.length;i++){
		if (allcolumns[i].innerHTML.indexOf(value) > -1){
			allcolumns[i].style.display = "";
			temp++;
		}else{
			allcolumns[i].style.display = "none";
		}
	}
	if (temp > 10){
		document.getElementById("allcolumns").style.height = "560px";
		document.getElementById("allcolumns").style.overflowY = "scroll";
	}else{
		document.getElementById("allcolumns").style.height = (temp*26)+"px";
		document.getElementById("allcolumns").style.overflowY = "hidden";
	}
}
function setInputcolumn(obj){
	document.getElementById("inputcolumn").value = obj.innerHTML;
}
function gotourl(){
	var allcolumns = document.getElementById("allcolumns").childNodes;
	for (var i=0;i<allcolumns.length;i++){
		if (document.getElementById("inputcolumn").value == allcolumns[i].innerHTML){
			window.location.href = allcolumns[i].value;
			return;
		}
	}
	alert("没有相符专辑！");
}
 </script>
</HTML>