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

简介: 第一种效果 (带自动匹配)这个效果再之前的的博客里面已经讲到过了,还没有看过的小伙伴可以移步→ 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/
目录
相关文章
如何设置控制台由底部展示改为右侧位置
这篇文章介绍了如何在Sublime Text编辑器中将控制台从底部展示改为右侧位置,通过使用Package Control来安装相关的插件来实现界面布局的调整。
|
8月前
如何让文本框显示提示信息
如何让文本框显示提示信息
43 0
|
小程序 JavaScript
小程序点击按钮弹出可填写框
小程序点击按钮弹出可填写框
107 0
|
8月前
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
58 0
|
8月前
下拉框
下拉框。
186 1
点击按钮,新增输入框,再点击按钮,删除输入框
点击按钮,新增输入框,再点击按钮,删除输入框
59 0
|
数据安全/隐私保护 C++
2.8 输入控件(一)
2.8 输入控件(一)
2.8 输入控件(一)
|
存储 前端开发 C++
2.8 输入控件(三)
2.8 输入控件(三)
2.8 输入控件(三)
|
存储 JavaScript
行内表单 在统一行显示搜索框 下拉框 按钮
行内表单 在统一行显示搜索框 下拉框 按钮
行内表单 在统一行显示搜索框 下拉框 按钮