DropDownList實(shí)現(xiàn)可輸入可選擇(兩種版本可選)
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>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,同時(shí)也希望多多支持腳本之家!
- 在dropDownList中實(shí)現(xiàn)既能輸入一個(gè)新值又能實(shí)現(xiàn)下拉選的代碼
- DropDownList 下拉框選擇改變促發(fā)事件和防全局刷新(推薦)
- DropDownList綁定選擇數(shù)據(jù)報(bào)錯(cuò)提示異常解決方案
- 用javascript為DropDownList控件下拉式選擇添加一個(gè)Item至定義索引位置
- asp.net中不能在DropDownList中選擇多個(gè)項(xiàng) 原因分析及解決方法
- ASP.NET中DropDownList下拉框列表控件綁定數(shù)據(jù)的4種方法
- C#使用DropDownList綁定添加新數(shù)據(jù)的方法匯總
- asp.net DropDownList實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
- DropDownList添加客戶端下拉事件操作
相關(guān)文章
jQuery文字提示與圖片提示效果實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery文字提示與圖片提示效果實(shí)現(xiàn)方法,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)與頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-07-07jquery簡(jiǎn)單實(shí)現(xiàn)外部鏈接用新窗口打開(kāi)的方法
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)外部鏈接用新窗口打開(kāi)的方法,涉及jQuery正則匹配http://開(kāi)頭外部鏈接網(wǎng)址的相關(guān)技巧,需要的朋友可以參考下2015-05-05原生js和jQuery寫(xiě)的網(wǎng)頁(yè)選項(xiàng)卡特效對(duì)比
本文實(shí)例中主要是通過(guò)判斷點(diǎn)擊菜單在菜單列表中的索引位置來(lái)顯示或隱藏選項(xiàng)區(qū).原生js還有很多種實(shí)現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實(shí)例用的是循環(huán)判斷.有需要的小伙伴可以參考下2015-04-04jQuery學(xué)習(xí)筆記之jQuery動(dòng)畫(huà)效果
本次學(xué)習(xí)分為兩個(gè)文件的測(cè)試,第一個(gè)是基本動(dòng)畫(huà),第二個(gè)是滑動(dòng)和透明動(dòng)畫(huà)效果,分別如下2013-09-09jQuery實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)活動(dòng)仿QQ音樂(lè)代碼分享
這篇文章主要展示了jQuery實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)活動(dòng)仿QQ音樂(lè)實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-08-08