当前位置：Gxlcms > JavaScript > 使用Jquery来实现可以输入值的下拉选单雏型

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

时间：2021-07-01 10:21:17 帮助过：12人阅读

上网找了一下，有一堆现成的控件，可是现成的我要去了解，来结合我现在系统来应用，要花不少时间，这个时间跟我自己搞一个成本应该差不多
那我还不如自己搞一个，比较能了解怎麽运作，後面就更容易加以运用了。
我的目标是，要把这个作成一个控件来使用，并要降低外部程式使用的耦合性，也就是外部程式使用上所需的必要条件要尽量减少，免得一忘记加什麽设定，程式就挂了。
如有可能甚至希望，只会需要引用一个 Jquery 其他 JavaSciprt 都由程式来产生。
最後是希望能结合之前讲得动态控件来使用，今天我就先研究一下，用出了下面这个 html 做的雏型，来先行测试一下可行性，确认无误在开始动工改成 ASP.NET 的控件。
这程式有几个重要问题，需要注意的：
下拉选单的触发方式、下拉选单的内容如何绘出，选单事件触发的抓取、抓取到选择事件後值要存在哪里
上述问题解决後，後面都要用 ASP.NET 的方式来重新撰写，所以在设计雏型时，需注意其能否应用在 ASP.NET 上
构思如下：
这我的打算就是设计一个 button 藉由其 OnClick 事件来触发，到时会由 JQuery 抓取 ASP.NET 动态产生的选单阵列，来动态产生选单，
产生的选单，要能设定三各事件 mouseover mouseout click，前两各是为了美观，这样 user 才知道有在动作，click 事件触发後，
将选取到的值储存到 asp.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; 
//选单的相关处理事件 
$("#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>"); 
//绑定事件处理 
$("#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: 100px;"> 
</div> 
</body> 
</html> 
 
这里面 还有各 想解决的问题，就是要让 divPop 也能动态产生..

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

人气教程排行

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