87,904
社区成员
发帖
与我相关
我的任务
分享节点动态加onclick动作不管用，加onmouseover管用
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'autoinTest.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="xmlhttp.js"></script>
<style type="text/css">
/* 整个无序列表的样式 , 关键点如下:
position : 设置为绝对定位, 这样列表可以出现在屏幕的任意位置
width: 指定宽度,否则列表会满屏显示
list-style-image, list-style-type : 设置为null,去掉默认的列表符号
display : 初始状态设置为隐藏
z-index : 调高显示优先级
*/
ul.list {
position:absolute;
width: 130px;
border:solid 1px #aaa;
list-style-image:none;
list-style-type:none;
margin:0px;
padding:2px;
font-size:12px;
font-family:微软雅黑;
cursor:pointer;
display:none;
z-index:999;
background-color:#eee;
}
ul.list li {
padding:0px;
}
/*
每一个选项的样式 , 关键点如下:
display : 设置为block可以让背景色整行显示
text-decoration:去掉默认的下划线
zoom: 缩放属性,设置为1,避免在IE浏览器中出现不必要的换行
*/
/*
鼠标移动到选项上的样式, 修改了背景色
*/
ul.list li:hover {
display:block;
padding:2px;
background-color:#ccc;
color:#222;
zoom:1
}
</style>
<script type="text/javascript">
function autoin(o){
var xmlhttp=ajaxFunction();
xmlhttp.open("post","autoin");
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function(){
back1(xmlhttp);
};
xmlhttp.send("c="+o.value);
}
function back1(xmlhttp){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var list=document.getElementById("list");
var info=xmlhttp.responseXML;
info=info.getElementsByTagName("province");
while(list.firstChild!=null)
list.removeChild(list.firstChild);
for(var i=0;i<info.length;i++){
var li=document.createElement("li");
var a_txt=info[i].lastChild.firstChild.nodeValue;
li.appendChild(document.createTextNode(a_txt));
li.setAttribute("onmouseover","getOne(this)");//换onclick不管用
list.appendChild(li);
}
show();
}
}
function getOne(o){
var txt=o.firstChild.nodeValue;
var input=document.getElementById("input");
input.value=txt;
var ul=document.getElementById("list");
ul.style.display="none";
}
function show(){
var o=document.getElementById("input");
var ul=document.getElementById("list");
ul.style.left=o.offsetLeft;
ul.style.top=o.offsetTop+o.offsetHeight;
ul.style.width=o.offsetWidth;
ul.style.display="block";
}
function hide(){
var ul=document.getElementById("list");
ul.style.display="none";
}
</script>
</head>
<body>
This is my JSP page. <br>
<input id="input" type="text" onblur="hide()" onkeyup="autoin(this)"/>
<ul id="list" class="list">
</ul>
</body>
</html>
...全文
请发表友善的回复…
发表回复
黄橙蓝 2015-04-10
- 打赏
- 举报
是这样，解决了，多谢~
allali 2015-04-08
- 打赏
- 举报
onblur="hide()" 删掉就可以了
hookee 2015-04-07
- 打赏
- 举报
试试看
li.click = (function(obj){ return function(){getOne(obj);} })(li);黄橙蓝 2015-04-07
- 打赏
- 举报
还是不行，为什么onmouseover可以呢？可能的原因是什么呢？
黄橙蓝 2015-04-06
- 打赏
- 举报
看着有些乱，就是加js中back1(xmlhttp)方法中加注释的那句，为什么加属性onclick不管用呐？求教，多谢多谢
