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

  • A+
所属分类:前端技术
摘要

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

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

[php]

<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>

<script type="text/javascript">
$(document).ready(function () {
//动画速度
var speed = 500;

//选单的相关处理事件
$("#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>");

//绑定事件处理
$("#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);
});
});

</script>

</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>

<!-- 弹出层 -->
<div id="divPop" style="background-color: #DDFFDD; border: solid 1px #000000; position: absolute; display:none;
width: 300px; height: auto;">

</div>
</body>
</html>

[/php]

  • 我的微信
  • 请务必准确填写验证信息
  • weinxin
  • 我的微信公众号
  • 提供本博客以及生活资讯
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • avatar 女性购物 1

      很不错的Jquery技术教程

      • avatar 女性时尚购物 1

        学习了。