使用Jquery來實現(xiàn)可以輸入值的下拉選單雛型

更新時間：2011年12月06日 01:26:27 作者：

最近案子中，需要使用下拉選單，但問題是，里面選項都會有各其他：，然後可以讓 user 在輸入

上網(wǎng) 找了一下，有一堆現(xiàn)成的控件，可是現(xiàn)成的我要去了解，來結(jié)合我現(xiàn)在系統(tǒng)來應(yīng)用，要花不少時間，這個時間跟我自己搞一個成本應(yīng)該差不多
那我還不如自己搞一個，比較能了解怎麼運作，後面就更容易加以運用了。
我的目標(biāo)是，要把這個作成一個控件來使用，并要降低外部程式使用的耦合性，也就是外部程式使用上所需的必要條件要盡量減少，免得一忘記加什麼設(shè)定，程式就掛了。
如有可能甚至希望，只會需要引用一個 Jquery 其他 JavaSciprt 都由程式來產(chǎn)生。
最後是希望能結(jié)合之前講得動態(tài)控件來使用，今天我就先研究一下，用出了下面這個 html 做的雛型，來先行測試一下可行性，確認(rèn)無誤在開始動工改成 ASP.NET 的控件。
這程式有幾個重要問題，需要注意的：
下拉選單的觸發(fā)方式、下拉選單的內(nèi)容如何繪出，選單事件觸發(fā)的抓取、抓取到選擇事件後值要存在哪里
上述問題解決後，後面都要用 ASP.NET 的方式來重新撰寫，所以在設(shè)計雛型時，需注意其能否應(yīng)用在 ASP.NET 上
構(gòu)思如下：
這我的打算就是設(shè)計一個 button 藉由其 OnClick 事件來觸發(fā)，到時會由 JQuery 抓取 ASP.NET 動態(tài)產(chǎn)生的選單陣列，來動態(tài)產(chǎn)生選單，
產(chǎn)生的選單，要能設(shè)定三各事件 mouseover mouseout click，前兩各是為了美觀，這樣 user 才知道有在動作，click 事件觸發(fā)後，
將選取到的值儲存到 asp.net 的 server 控件 TextBox 中，如此在 PostBack 就能把值傳回 server 端來處理。

復(fù)制代碼代碼如下:

 
<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 來實現(xiàn)可以輸入值的下拉選單（一）</title> 
<script type="text/javascript"> 
$(document).ready(function () { 
//動畫速度 
var speed = 500; 
//選單的相關(guān)處理事件 
$("#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()); 
} 
}); 
//動態(tài)產(chǎn)生下拉選單的選項，後面 要從 array 中讀取產(chǎn)生選單 
$("#divPop").append("<div>test1</div>"); 
$("#divPop").append("<div>test2</div>"); 
//綁定事件處理 
$("#btnDDL").click(function (event) { 
//取消事件冒泡 
event.stopPropagation(); 
//設(shè)置彈出層位置 
var offset = $(event.target).offset(); 
//alert($(event.target).width()); 
var inID = $(this).get(0).getAttribute("inputid"); 
//依據(jù) input 跟 button 寬度來設(shè)定 下拉選單的寬度 
$("#divPop")[0].style.width = ($("#" + inID).width() + $(this).width() + 10) + "px"; 
//單擊空白區(qū)域隱藏彈出層 
$(document).click(function (event) { $("#divPop").hide(speed) }); 
//設(shè)定下拉選單顯示的位置 
$("#divPop").css({ top: offset.top + $(event.target).height() + 10 + "px", left: offset.right }); 
//切換彈出層的顯示狀態(tài) 
$("#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> 