DropDownList實現可輸入可選擇

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>

獲取select的value、text值

 

作者：小路 QQ：2490024434 
出處：http://www.cnblogs.com/lengzhan/ 
本文版權歸【冷戰】和博客園所有，歡迎轉載收藏，未經作者同意須保留此段聲明，否則保留追究法律責任的權利。