可输入的下拉框(简易实现)

简介: 第一种效果 (带自动匹配)这个效果再之前的的博客里面已经讲到过了,还没有看过的小伙伴可以移步→ http://www.cnblogs.com/zhangxiaoyong/p/5763432.html 第二种效果 今天主要讲第二种效果,也比较简单,先看下效果 实现 页面部分 1...

第一种效果

(带自动匹配)这个效果再之前的的博客里面已经讲到过了,还没有看过的小伙伴可以移步→ http://www.cnblogs.com/zhangxiaoyong/p/5763432.html

第二种效果

今天主要讲第二种效果,也比较简单,先看下效果

实现

页面部分

1 <form runat="server">
2     <asp:DropDownList ID="DropDownList" runat="server" Width="180px" AutoPostBack="false"
3         Style="position: absolute;" onchange="SearchChange();">
4     </asp:DropDownList>
5    
6         <iframe id="DivShims" src="javascript:false;" scrolling="no" frameborder="0" style="position: absolute;
7             height: 20px;" width="158px"></iframe>
8  <input type="text" id="txtCName" runat="server" style="width: 158px; position: absolute;" />
9 </form>

js部分

1 <script type="text/javascript">
2     function SearchChange() {
3         var ddl = document.getElementById("DropDownList");
4         var index = ddl.selectedIndex;
5         var Value = ddl.options[index].value; //获取选中下拉列表的值
6         $("#txtCName").val(Value);//将选中的值赋值给input
7     }
8 </script>

后台测试代码

1 List<string> list = new List<string>()
2 { 
3      "湖北武汉", "湖北咸宁",  "湖北孝感", "湖北安陆", "湖北恩施" 
4 };
5 foreach (var item in list)
6 {
7       DropDownList.Items.Add(item);
8 }

 Demo传送带→  https://github.com/XiaoYong666/show_TextBox

  • 感谢你的阅读。如果你觉得这篇文章对你有帮助或者有启发,就请推荐一下吧~你的精神支持是博主强大的写作动力。欢迎转载!
  • 博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。
  • 欢迎加入.NET 从入门到精通技术讨论群→523490820 期待你的加入
  • 不舍得打乱,就永远学不会复原。被人嘲笑的梦想,才更有实现的价值。
  • 我的博客:http://www.cnblogs.com/zhangxiaoyong/
目录
相关文章
|
消息中间件 Apache RocketMQ
rocketmq客户端发送消息报错和超时问题
org.apache.rocketmq.remoting.exception.RemotingTimeoutException: wait response on the channel <10.0.21.69:10911> timeout, 1000(ms)、 closeChannel: close the connection to remote address
5208 1
rocketmq客户端发送消息报错和超时问题
|
9月前
|
传感器 大数据 API
Python数字限制在指定范围内:方法与实践
在Python编程中,限制数字范围是常见需求,如游戏属性控制、金融计算和数据过滤等场景。本文介绍了五种主流方法:基础条件判断、数学运算、装饰器模式、类封装及NumPy数组处理,分别适用于不同复杂度和性能要求的场景。每种方法均有示例代码和适用情况说明,帮助开发者根据实际需求选择最优方案。
430 0
|
10月前
|
存储 Rust 安全
Rocket框架JWT鉴权实战:保护Rust Web API的安全方案​
本篇文章是基于rust语言和rocket依赖实现网页JWT认证和鉴权,完成简单的JWT token的验证和鉴权处理,使用cargo做依赖的导入和测试。
496 0
|
存储 人工智能 Java
一文轻松搞清楚数字电路的锁存器和触发器
数字电路中的锁存器和触发器是核心存储单元,均能存储二进制状态。锁存器为电平敏感型,适用于异步电路;触发器为边沿敏感型,适用于同步时序电路。两者在抗干扰能力、时序控制精度等方面有显著差异。锁存器功耗较低,适合低功耗设计;触发器则更易满足时序要求,广泛用于FPGA和ASIC中。选择时需综合考虑应用场景与时序收敛等因素。
1418 0
|
前端开发 JavaScript 测试技术
React 错误边界 (Error Boundaries) 详解
【10月更文挑战第17天】在现代前端开发中,React 通过“错误边界”机制提高了应用的健壮性和用户体验。错误边界是一种特殊的 React 组件,能捕获并处理其子组件树中的 JavaScript 错误,防止应用因局部错误而整体崩溃。创建错误边界需实现 `static getDerivedStateFromError` 和 `componentDidCatch` 方法,分别用于更新状态和记录错误。正确使用错误边界,可以有效提升应用的稳定性和用户满意度。
1067 62
|
机器学习/深度学习 人工智能 算法
Nature:AI也许可以拥有常识,但不是现在
人工智能(AI)的快速发展引发了关于其是否能拥有常识的讨论。尽管AI在特定任务上取得进展,但目前仍缺乏真正的常识理解。常识涉及对物理世界、社会规范和文化背景的理解,难以通过数据和算法完全捕捉。研究人员正通过大规模语言模型和强化学习等方法提升AI的常识能力,但仍面临显著局限性,如对物理世界的直观理解不足、社会文化背景理解欠缺以及常识能力的通用性差等问题。未来,多模态学习和与人类交互有望增强AI的常识能力。
381 20
|
人工智能 分布式计算 供应链
官宣!哈根达斯、湾仔码头、蓝挚搬上阿里云
官宣!哈根达斯、湾仔码头、蓝挚搬上阿里云
358 5
|
网络架构 Python
在Flask中,如何定义路由并处理HTTP请求的不同方法(GET、POST等)?
【4月更文挑战第25天】在Flask中,使用`@app.route()`装饰器定义路由,如`/hello`,处理GET请求返回&#39;Hello, World!&#39;。通过添加`methods`参数,可处理不同HTTP方法,如POST请求。单一函数可处理多种方法,通过检查`request.method`区分。动态路由使用 `&lt;variable_name&gt;` 传递URL变量到视图函数。这些基础构成处理HTTP请求的Flask应用。
587 1
|
NoSQL Linux 编译器
Linux CentOS 内核编译全流程:从安装vmware开始
Linux CentOS 内核编译全流程:从安装vmware开始
1176 1
Linux CentOS 内核编译全流程:从安装vmware开始
|
图形学
Unity官方中文版!!!附教程——无需破解!
Unity安装官方中文版教程 本文提供全流程,中文翻译。 助力快速完成 Unity 中文汉化的安装 为新手节省宝贵的时间,避免采坑! 安装过程非常简单,这里 Chinar 只说最简单的安装方式 下载官方语言文件 zh-cn.
19234 0