乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > JavaScript > DropDownList实现可输入可选择(两种版本可选)
  • 收藏本页
      DropDownList实现可输入可选择(两种版本可选)
      发布时间:2016-12-21 08:10:45 关键词: dropdownlist输入,dropdownlist选择
      内容简介:本篇文章主要介绍了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>
    

    以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持乐码库!

      相关内容
      最新更新
      热门排行榜