使用 Jquery 来实现可以输入值的下拉选单

老虎说测试 前端技术字数 1973阅读6分34秒阅读模式
摘要使用 Jquery 来实现可以输入值的下拉选单

使用 Jquery 来实现可以输入值的下拉选单

[php]文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<title>使用 Jquery 来实现可以输入值的下拉选单</title>文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

<script type="text/javascript">
$(document).ready(function () {
//动画速度
var speed = 500;文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

//选单的相关处理事件
$("#divPop div").live("mouseover mouseout click", function (event) {
if (event.type == "mouseover") {
//$(this).addClass(‘highlight’);
$(this)[0].style.backgroundColor = '#E6F5FA';
}
if (event.type == "mouseout") {
//$(this).removeClass("highlight");
$(this)[0].style.backgroundColor = '#DDFFDD';
}
if (event.type == "click") {
var inID = $("#btnDDL").get(0).getAttribute("inputid");
//alert($(this).html());
$("#" + inID).val($(this).html());
}
});
//动态产生下拉选单的选项,後面 要从 array 中读取产生选单
$("#divPop").append("<div>test1</div>");
$("#divPop").append("<div>test2</div>");
$("#divPop").append("<div>test3</div>");
$("#divPop").append("<div>test4</div>");
$("#divPop").append("<div>test5</div>");
$("#divPop").append("<div>test6</div>");
$("#divPop").append("<div>test7</div>");
$("#divPop").append("<div>test8</div>");
$("#divPop").append("<div>test9</div>");文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

//绑定事件处理
$("#btnDDL").click(function (event) {
//取消事件冒泡
event.stopPropagation();
//设置弹出层位置
var offset = $(event.target).offset();
//alert($(event.target).width());
var inID = $(this).get(0).getAttribute("inputid");
//依據 input 跟 button 寬度來設定 下拉選單的寬度
$("#divPop")[0].style.width = ($("#" + inID).width() + $(this).width() + 10) + "px";
//单击空白区域隐藏弹出层
$(document).click(function (event) { $("#divPop").hide(speed) });
//设定下拉选单显示的位置
$("#divPop").css({ top: offset.top + $(event.target).height() + 10 + "px", left: offset.right });
//切换弹出层的显示状态
$("#divPop").toggle(speed);
});
});文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

</script>文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

</head>
<body>
<div>
<br /><br /><br />
<input name="txtKey" type="text" maxlength="30" size="30" id="txtKey" style="Padding:2px;" /><button id="btnDDL" inputid="txtKey" >选择默认提供项目</button>
</div>文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

<!-- 弹出层 -->
<div id="divPop" style="background-color: #DDFFDD; border: solid 1px #000000; position: absolute; display:none;
width: 300px; height: auto;">文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

</div>
</body>
</html>文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

[/php]文章源自陈学虎-https://chenxuehu.com/article/2012/11/964.html

 
  • 版权声明:本文为原创文章,转载请附上原文出处链接及本声明。
  • 转载请注明:使用 Jquery 来实现可以输入值的下拉选单 | https://chenxuehu.com/article/2012/11/964.html
评论  2  访客  2