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>

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

赞 (0)

相关推荐

  • C#使用DropDownList绑定添加新数据的方法汇总

    DropDownList控件又称下拉列表框控件, 控件 列表 中的多行数 据 以隐含 的形式表 示 出 来,当用户需要选择所需列表项时,通过点击 "下三角 "图形 展示 ,用户每次 只能选用一个 数据项.DropDownList控件实际上是列表项 的 容器 ,下拉列表框 用 Items集合表示各项 的内 容.如果在 ASP．NET页面中逐个 的手 动填写 DropDownList控件的列表选项,当列表项很多 的时候会 比较繁琐 ,而且修改 比较麻烦 . DropDownList控件动态

  • DropDownList绑定选择数据报错提示异常解决方案

    抛出的异常信息:异常详细信息: System.ArgumentOutOfRangeException: "ddlTotalCostDiscount "有一个无效 SelectedValue,因为它不在项目列表中. 原先给DropDownList这样赋值: this.ddlTotalCostDiscount.SelectedValue = obj.TotalCostDiscount.ToString(): 改成这样赋值: ddlTotalCostDiscount.SelectedInde

  • ASP.NET中DropDownList下拉框列表控件绑定数据的4种方法

    DropDownList Web 服务器控件使用户能够从预定义的列表中选择一项.它与 ListBox Web 服务器控件的不同之处在于,其项列表在用户单击下拉按钮之前一直处于隐藏状态.另外,DropDownList 控件与 ListBox 控件的不同之处还在于它不支持多重选择模式. DropDownList在html中的呈现对应的是select,下面让我们来看一下DropDownList绑定数据的几种方法. 一.把Array数组绑到DropDownList 复制代码 代码如下: string[]

  • asp.net中不能在DropDownList中选择多个项 原因分析及解决方法

    示例代码: 复制代码 代码如下: BulkStockBll bll = new BulkStockBll(); DataSet ds = bll.GetBulkStock(); this.ddl_BulkStock.DataTextField = "Name" ; this.ddl_BulkStock.DataValueField = "ID" ; this.ddl_BulkStock.DataSource = ds; this.ddl_BulkStock.Data

  • 用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置

    用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置

    用Javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置. 准备数据,创建一个对象,将是存储DropDownList控件每个Item数据. 复制代码 代码如下: Imports Microsoft.VisualBasic Namespace Insus.NET Public Class Catalog Private _ID As Integer Private _Name As String Public Property ID As Integer Get

  • asp.net DropDownList实现二级联动效果

    asp.net DropDownList实现二级联动效果

    最近在做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件.代码如下: <tr> <td>新闻风格:</td> <td><asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True&q

  • DropDownList 下拉框选择改变促发事件和防全局刷新(推荐)

    代码: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> //ASP.NET中使用UpdatePanel实现局部异步刷新 <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Dr

  • 在dropDownList中实现既能输入一个新值又能实现下拉选的代码

    aspx: 复制代码 代码如下: <div id="selDiv" style=" z-index:100; visibility:visible; clip:rect(0px 110px 80px 92px); position:absolute"><%--left:279px; top:167px"--%> <asp:DropDownList ID="workerno_list" runat="

  • DropDownList添加客户端下拉事件操作

    如果要想给 DropDownList 服务器控件添加客户端下拉事件,我们可以强制给它添加 onchange 事件,尽管在控件中没有这个方法的提示.添加完这个事件还不能达到目的,还要设置 AutoPostBack 属性为 false,不让它回发后台事件. 以下就是为大家分享的代码: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Dr

  • 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=

  • Java模仿微信实现零钱通简易功能(两种版本)

    Java模仿微信实现零钱通简易功能(两种版本)

    目录 1. 需求描述 2. 需求分析 3. 实现零钱通主要功能 3.1 写一个菜单 3.2 零钱通明细 3.3 收益入账 3.4 消费 3.5 用户退出改进 3.6 改进金额判断 4. 面向过程版实现 5. 优化成OOP版 5.1 实现OOP版 5.2 OOP的好处 最近刚刚复习了一下Java的面向对象三大特性,这里跟着hsp做个小零钱通实践一下,以下记录了学习和编写过程 1. 需求描述 使用Java 开发零钱通项目, 模仿微信实现简易功能,可以完成收益入账,消费,查看明细,退出系统等功能,先按

  • ajax的两种提交方式(get/post)和两种版本

    最近比较闲,就把以前用过的技术串一下做个手札,方便以后自己偷懒,小鸟你们幸福了. 首先主要是将javascript版本ajax做下注释:ajax异步刷新主要是将所需条件拼成字符串传入后台,处理之后,直接调用回调函数将所得数据返还给页面,并加以显示,因为还在本页面,所以不用刷新页面,懂了了吧,本篇也用encodeURI对字符串做了加密,并在类里做了解码,其中需要一些注意的地方在源码里做了注释.get/post两种提交方式,但get提交容易乱码,一定多加注意 jsp页面: 复制代码 代码如下: <%

  • js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: 第一种方案 将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下: js代码: <script> var _h = 0; function SetH(o) { _h = o.scrollTop SetCookie("a&q

  • php面向对象的方法重载两种版本比较

    多个函数用同一个名字,但参数表,即参数的个数或(和)数据类型可以不同,调用的时候,虽然方法名字相同,但根据参数表可以自动调用对应的函数. PHP4 中仅仅实现了面向对象的部分的.简单的功能,而 PHP5 以后对对象的支持就强大的多了. 对于多态的实现,PHP4 只支持覆盖(override),而不支持重载(overload).但我们可以通过一些技巧来"模拟"重载的实现. PHP5 虽然可以支持覆盖和重载,但重载在具体实现上,和其他语言还有较大的差别. 1,在 PHP4 中"模

  • DropDownList控件绑定数据源的三种方法

    本文给大家分享web  中 DropDownList绑定数据源的几种方式,先给大家分享三种常见的方式,具体详情如下所示:  第一种 this.ddltype.DataTextField = "btName";//显示的值 this.ddltype.DataValueField = "btId";//获取dropdownlist中的值 ddltype.DataSource = service.GetBusinessTypeAll(""); this

  • 将input file的选择的文件清空的两种解决方案

    上传文件时,选择了文件后想清空文件路径,搜索了一下,用两种方法解决 复制代码 代码如下: <input type="file" id="fileupload" name="file" /> 第一种: 复制代码 代码如下: var obj = document.getElementById('fileupload') ; obj.select(); document.selection.clear(); 第二种: 复制代码 代码如下:

  • 分享实现Android图片选择的两种方式

    Android选择图片的两种方式: 第一种:单张选取 通过隐式启动activity,跳转到相册选择一张返回结果 关键代码如下: 发送请求: private static final int PICTURE = 10086; //requestcode Intent intent = new Intent(); if (Build.VERSION.SDK_INT < 19) {//因为Android SDK在4.4版本后图片action变化了 所以在这里先判断一下 intent.setAction

  • 使用JavaScript判断用户输入的是否为正整数(两种方法)

    在项目开发中,需要使用JavaScript验证用户输入的是否为正整数. 方法一: var type="^[0-9]*[1-9][0-9]*$"; var r=new RegExp(type); var flag=r.test(subjectHour.value); if(!flag){ alert("课时应为正整数"); subjectHour.focus(); return false; } 方法二: var type="^[0-9]*[1-9][0-9

  • js限制文本框输入长度两种限制方式(长度、字节数)

    功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js 复制代码 代码如下: function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;//是否使用字节长度限制(1汉字=2字符) var txtlength;//到达限制时,字符串的长度 var

随机推荐