当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用Jquery来实现可以输入值的下拉选单

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

2018年09月14日  | 移动技术网IT编程  | 我要评论

有几个 重要问题，需要注意的：
下拉选单的触发方式、下拉选单的内容如何绘出，选单事件触发的抓取、抓取到选择事件後值要存在哪里
上述问题解决後，後面 都要用 asp.net 的方式来重新撰写，所以在设计雏型时，需注意其能否应用在 asp.net 上
构思如下：
这我的打算就是设计一个 button 藉由其 onclick 事件来触发，到时会由 jquery 抓取 asp.net 动态产生的选单阵列，来动态产生选单，
产生的选单，要能设定三各事件 mouver mouseout click，前两各 是为了美观，这样 user 才知道 有在动作，click 事件触发後，
将选取到的值储存到 .net 的 server 控件 textbox 中，如此 在 postback 就能把值 传回 server 端 来处理。

代码如下:


<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<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;
//选单的相关处理事件
$("#ppop p").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 中读取产生选单
$("#ppop").append("<p>test1</p>");
$("#ppop").append("<p>test2</p>");
//绑定事件处理
$("#btnddl").click(function (event) {
//取消事件冒泡
event.stoppropagation();
//设置弹出层位置
var offset = $(event.target).offset();
//alert($(event.target).width());
var inid = $(this).get(0).getattribute("inputid");
//依據 input 跟 button 寬度來設定 下拉選單的寬度
$("#ppop")[0].style.width = ($("#" + inid).width() + $(this).width() + 10) + "px";
//单击空白区域隐藏弹出层
$(document).click(function (event) { $("#ppop").hide(speed) });
//设定下拉选单显示的位置
$("#ppop").css({ top: offset.top + $(event.target).height() + 10 + "px", left: offset.right });
//切换弹出层的显示状态
$("#ppop").toggle(speed);
});
});
</script>
</head>
<body>
<p>
<br /><br /><br />
<input name="txtkey" type="text" maxlength="30" size="30" id="txtkey" style="padding:2px;" /><button id="btnddl" inputid="txtkey" >▼</button>
</p>
<!-- 弹出层 -->
<p id="ppop" style="background-color: #ddffdd; border: solid 1px #000000; position: absolute; display:none;
width: 300px; height: 100px;">
</p>
</body>
</html>


这里面 还有各 想解决的问题，就是要让 ppop 也能动态产生。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网