DropDownList實(shí)現(xiàn)可輸入可選擇（兩種版本可選）

更新時(shí)間：2016年12月07日 16:37:08 作者：冷戰(zhàn)

本篇文章主要介紹了DropDownList實(shí)現(xiàn)可輸入可選擇的具體實(shí)現(xiàn)代碼，并附上兩種版本（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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

dropdownlist

相關(guān)文章

jQuery獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法
獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法有很多，本教程為大家介紹下使用jquery獲取的具體實(shí)現(xiàn)
2014-02-02
jQuery動(dòng)態(tài)添加刪除select項(xiàng)(實(shí)現(xiàn)代碼)
以下是對(duì)jQuery動(dòng)態(tài)添加刪除select項(xiàng)的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下
2013-09-09
jQuery特殊符號(hào)轉(zhuǎn)義的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jQuery特殊符號(hào)轉(zhuǎn)義的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
當(dāng)jQuery1.7遇上focus方法的問(wèn)題
如果一定要用最高版本的jQuery，最省事的辦法莫過(guò)于在寫(xiě)xxx.focus()時(shí)，加一個(gè)try/catch，變成try{xxx.focus();}catch(e){}
2014-01-01
jquery實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為
本文主要介紹了jquery鍵盤(pán)事件實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為的方法，這種使用場(chǎng)景為當(dāng)首頁(yè)有幾個(gè)鏈接需要選擇的時(shí)候，使用鍵盤(pán)就可以進(jìn)行觸發(fā)行為。下面跟著小編一起來(lái)看下吧
2017-03-03
jquery實(shí)現(xiàn)的一個(gè)文章自定義分段顯示功能
基于jquery實(shí)現(xiàn)的文章自定義分段顯示，如果文章內(nèi)容太多的話轉(zhuǎn)換有點(diǎn)慢，大家若喜歡的話，可以參考下
2014-05-05
在JavaScript中重寫(xiě)jQuery對(duì)象的方法實(shí)例教程
這篇文章主要介紹了在JavaScript中重寫(xiě)jQuery對(duì)象的方法,在某些情況下jQuery無(wú)法滿足應(yīng)用開(kāi)發(fā)的時(shí)候可以采用javascript重寫(xiě)jQuery方法來(lái)滿足功能的實(shí)現(xiàn),需要的朋友可以參考下
2014-08-08
jquery動(dòng)態(tài)改變div寬度和高度
這篇文章主要介紹了jquery動(dòng)態(tài)改變div寬度和高度,需要的朋友可以參考下
2015-02-02
jQuery實(shí)現(xiàn)的模擬彈出窗口功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的模擬彈出窗口功能,結(jié)合實(shí)例形式分析了jQuery彈出窗口的初始化、坐標(biāo)、背景設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下
2016-11-11
Jquery選擇器中使用變量實(shí)現(xiàn)動(dòng)態(tài)選擇例子
這篇文章主要介紹了Jquery選擇器中使用變量實(shí)現(xiàn)動(dòng)態(tài)選擇例子,這樣做的好處我們可以動(dòng)態(tài)選擇一些元素,核心思想其實(shí)就是用字符串組合,需要的朋友可以參考下
2014-07-07