DropDownList實現可輸入可選擇（兩種版本可選）
更新時間：2016年12月07日 16:37:08 作者：冷戰(zhàn)
本篇文章主要介紹了DropDownList實現可輸入可選擇的具體實現代碼，并附上兩種版本（js版本和jquery版本），可供大家選擇。有需要的朋友可以參考下
1、js版本
<div style="z-index: 0; visibility: visible; clip: rect(0px 105px 80px 85px); position: absolute">
<asp:DropDownList ID="ddlModel" runat="server" Style="z-index: -1" Width="105px"
onchange="getModelTo(this)">
<asp:ListItem Value="1">SSM-001</asp:ListItem>
<asp:ListItem Value="2">DDW-523</asp:ListItem>
<asp:ListItem Value="3">QSD-009</asp:ListItem>
</asp:DropDownList>
</div>
<asp:TextBox ID="txtModel" runat="server" Style="z-index: 1px; position: absolute"
Font-Size="9pt" Width="95px" Height="16px" MaxLength="50"></asp:TextBox>
<script type="text/javascript">
function getModelTo(e) {
document.getElementById("txtModel").value = e.options[e.selectedIndex].innerText;
document.getElementById("txtModel").select();
}
</script>
2、jquery版本
<div style="z-index: 0; visibility: visible; clip: rect(0px 105px 80px 85px); position: absolute">
<asp:DropDownList ID="ddlModel" runat="server" Style="z-index: -1" Width="105px"
onchange="getModelTo(this)">
<asp:ListItem Value="1">SSM-001</asp:ListItem>
<asp:ListItem Value="2">DDW-523</asp:ListItem>
<asp:ListItem Value="3">QSD-009</asp:ListItem>
</asp:DropDownList>
</div>
<asp:TextBox ID="txtModel" runat="server" Style="z-index: 1px; position: absolute"
Font-Size="9pt" Width="95px" Height="16px" MaxLength="50"></asp:TextBox>
<script type="text/javascript">
function getModelTo(e) {
$("#txtModel").val($("#ddlModel").find("option:selected").text());
$("#txtModel").select();
}
</script>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，同時也希望多多支持腳本之家！
您可能感興趣的文章:
- 在dropDownList中實現既能輸入一個新值又能實現下拉選的代碼
- DropDownList 下拉框選擇改變促發(fā)事件和防全局刷新(推薦)
- DropDownList綁定選擇數據報錯提示異常解決方案
- 用javascript為DropDownList控件下拉式選擇添加一個Item至定義索引位置
- asp.net中不能在DropDownList中選擇多個項 原因分析及解決方法
- ASP.NET中DropDownList下拉框列表控件綁定數據的4種方法
- C#使用DropDownList綁定添加新數據的方法匯總
- asp.net DropDownList實現二級聯動效果
- DropDownList添加客戶端下拉事件操作
相關文章
獲取當前對象標簽名稱的方法有很多，本教程為大家介紹下使用jquery獲取的具體實現2014-02-02
jQuery動態(tài)添加刪除select項(實現代碼)
以下是對jQuery動態(tài)添加刪除select項的實現代碼進行了詳細的分析介紹，需要的朋友可以過來參考下2013-09-09
下面小編就為大家?guī)硪黄猨Query特殊符號轉義的實現。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
如果一定要用最高版本的jQuery，最省事的辦法莫過于在寫xxx.focus()時，加一個try/catch，變成try{xxx.focus();}catch(e){}2014-01-01
jquery實現tab鍵進行選擇后enter鍵觸發(fā)click行為
本文主要介紹了jquery鍵盤事件實現tab鍵進行選擇后enter鍵觸發(fā)click行為的方法，這種使用場景為當首頁有幾個鏈接需要選擇的時候，使用鍵盤就可以進行觸發(fā)行為。下面跟著小編一起來看下吧2017-03-03
基于jquery實現的文章自定義分段顯示，如果文章內容太多的話轉換有點慢，大家若喜歡的話，可以參考下2014-05-05
這篇文章主要介紹了在JavaScript中重寫jQuery對象的方法,在某些情況下jQuery無法滿足應用開發(fā)的時候可以采用javascript重寫jQuery方法來滿足功能的實現,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了jquery動態(tài)改變div寬度和高度,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery實現的模擬彈出窗口功能,結合實例形式分析了jQuery彈出窗口的初始化、坐標、背景設置等相關操作技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Jquery選擇器中使用變量實現動態(tài)選擇例子,這樣做的好處我們可以動態(tài)選擇一些元素,核心思想其實就是用字符串組合,需要的朋友可以參考下2014-07-07