DropDownList實現可輸入可選擇

 来源:http://www.cnblogs.com/lengzhan/archive/2016/11/24/6097593.html

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>