首頁 > 開發者 > JavaScript
上網 找了一下，有一堆現成的控制項，可是 現成的 我要去瞭解，來結合我現在 系統來應用，要花不少時間，這個時間 跟我自己 搞一個成本 應該差不多
那我還不如 自己 搞一個，比較能瞭解 怎麽運作，後面就更容易加以運用了。
我的目標是，要把 這個 作成一個控制項來使用，並要降低外部程式使用的耦合性，也就是 外部程式 使用上所需的必要條件要盡量減少，免得一忘記加什麽設定，程式 就掛了。
如有可能 甚至希望，只會需要引用一個 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 也能動態產生..
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
