<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input onClick="ywbtn();" id="scope" type="text" autocomplete="off" name="scope" size="50" value=""/>
<style type="text/css">
#ywcon{position:absolute;width:375px;height:300px;overflow-y:scroll;border:3px solid #CCCCCC;background:#FFFFFF;display:none;z-index:9999}
#ywcon p{padding:5px;cursor:pointer}
</style>
<div id="ywcon">
<p onClick="ywadd('1');">列表1</p>
<p onClick="ywadd('2');">列表1</p>
<p onClick="ywadd('3');">列表2</p>
<p onClick="ywadd('4');">列表3</p>
</div>
<script>
function ywbtn(){
document.getElementById('ywcon').style.display="block";
stopEvent();
}
function ywadd(id){
var scope = document.getElementById('scope');
var scopecon = ","+scope.value+",";
if(scopecon.indexOf(","+id+",") != -1){
alert("该项已存在！");
return(false);
}
if(scope.value==""){scope.value=id;}else{scope.value+=","+id;}
stopEvent();
}
document.body.onclick=function(){
document.getElementById('ywcon').style.display="none";
};
window.onscroll = function () {
document.getElementById('ywcon').style.display="none";
}
//阻止冒泡的函数
var stopEvent = function(event){
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
};
</script>
</body>
</html>
