最近案子中，需要使用下拉选单，但问题是，里面选项都会有各 其他：，然後 可以 让 user 在输入值

上网 找了一下，有一堆现成的控件，可是 现成的 我要去了解，来结合我现在 系统来应用，要花不少时间，这个时间 跟我自己 搞一个成本 应该差不多

那我还不如 自己 搞一个，比较能了解 怎麽运作，後面就更容易加以运用了。

我的目标是，要把 这个 作成一个控件来使用，并要降低外部程式使用的耦合性，也就是 外部程式 使用上所需的必要条件要尽量减少，免得一忘记加什麽设定，程式 就挂了。

如有可能 甚至希望，只会需要引用一个 Jquery 其他 JavaSciprt 都由程式 来产生。

最後是希望能结合 之前讲得动态控件 来使用，今天 我就先研究一下，用出了下面这个 html 做的雏型，来先行测试一下可行性，确认无误在开始动工改成 ASP.NET 的控件 。

这程式 有几个 重要问题，需要注意的：

下拉选单的触发方式、下拉选单的内容如何绘出，选单事件触发的抓取、抓取到选择事件後值要存在哪里

上述问题解决後，後面 都要用 ASP.NET 的方式来重新撰写，所以在设计雏型时，需注意其能否应用在 ASP.NET 上

构思如下：

这我的打算就是设计一个 button 藉由其 OnClick 事件来触发，到时会由 JQuery 抓取 ASP.NET 动态产生的选单阵列，来动态产生选单，

产生的选单，要能设定三各事件 mouseover mouseout click，前两各 是为了美观，这样 user 才知道 有在动作，click 事件触发後，

将选取到的值储存到 asp.net 的 server 控件 TextBox 中，如此 在 PostBack 就能把值 传回 server 端 来处理。

 1     <head>   2         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3         <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>   4         <title>使用 Jquery 来实现可以输入值的下拉选单（一）</title>   5       6       7         <script type="text/javascript"> 8             $(document).ready(function () { 9                 //动画速度  10                 var speed = 500;11 12                 //选单的相关处理事件13                 $("#divPop div").live("mouseover mouseout click", function (event) {14                     if (event.type == "mouseover") {15                         //$(this).addClass(‘highlight’);16                         $(this)[0].style.backgroundColor = '#E6F5FA';17                     }18                     if (event.type == "mouseout") {19                         //$(this).removeClass("highlight");20                         $(this)[0].style.backgroundColor = '#DDFFDD';21                     }22                     if (event.type == "click") {23                         var inID = $("#btnDDL").get(0).getAttribute("inputid");24                         //alert($(this).html());25                         $("#" + inID).val($(this).html());26                     }27                 });28                 //动态产生下拉选单的选项，後面 要从 array 中读取产生选单29                 $("#divPop").append("<div>test1</div>");30                 $("#divPop").append("<div>test2</div>");31 32                 //绑定事件处理  33                 $("#btnDDL").click(function (event) {34                     //取消事件冒泡  35                     event.stopPropagation();36                     //设置弹出层位置  37                     var offset = $(event.target).offset();38                     //alert($(event.target).width());39                     var inID = $(this).get(0).getAttribute("inputid");40                     //依據 input 跟 button 寬度來設定 下拉選單的寬度41                     $("#divPop")[0].style.width = ($("#" + inID).width() + $(this).width() + 10) + "px";42                     //单击空白区域隐藏弹出层  43                     $(document).click(function (event) { $("#divPop").hide(speed) });44                     //设定下拉选单显示的位置45                     $("#divPop").css({ top: offset.top + $(event.target).height() + 10 + "px", left: offset.right });46                     //切换弹出层的显示状态  47                     $("#divPop").toggle(speed);48                 });49             });50 51         </script>  52      53     </head>  54     <body>  55         <div>  56             <br /><br /><br />  57             <input name="txtKey" type="text" maxlength="30" size="30" id="txtKey" style="Padding:2px;" /><button id="btnDDL" inputid="txtKey" >▼</button>  58         </div>  59               60         <!-- 弹出层 -->  61         <div id="divPop" style="background-color: #DDFFDD; border: solid 1px #000000; position: absolute; display:none;  62             width: 300px; height: 100px;">  63             64         </div>  65     </body>  66     </html>

这里面 还有各 想解决的问题，就是要让 divPop 也能动态产生...

转载于:https://www.cnblogs.com/babydragoner/archive/2011/12/01/2270913.html

使用 Jquery 来实现可以输入值的下拉选单 雏型相关推荐

  1. Unity 之 UGUI Dropdown下拉选单组件详解

    Unity 之 UGUI Dropdown下拉选单组件详解 1,属性面板 1), Dropdown的组成 2,代码操作 3,使用实例 1), 控制菜单展开方向 4,相关扩展 1), Lua中动态添加O ...

  2. Excel学习日记：L19-定义名称Indirect函数下拉选单设定

    目录 一.定义名称 二.Indierct函数 三.下拉选单设定 一.定义名称 名称设定就是将储存格的范围转化成一个更容易理解的名称. 选择数据-公式-定义名称即可将该组数据命名,在以后调用这个范围时, ...

  3. 在 jquery repeater 中添加设置日期,下拉,复选框等控件

    JQueryElement 更新到了 3.5.1, 今天给大家主要讲下如何在 Repeater 的模板中添加设置一些控件. 由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, ...

  4. jQuery和CSS3超酷二级下拉菜单插件

    这是一款效果很酷又简单实用的 jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是 ...

  5. jquery复选框选中及下拉框选中指定项(删除项)

    (1)复选框选中及下拉框选中指定项(删除项) <%@ taglib prefix="form" uri="http://www.springframework.or ...

  6. jquery回弹_jQuery实现移动端下拉展现新版的内容回弹动画

    jQuery移动端下拉展现新版的内容动画回弹,供大家参考,详细内容如下 jquery的方法,写的比较细,可以改成原生的这里就不做改了, 话不多说上代码, 也可以改成下拉刷新版 顶部回弹 html,bo ...

  7. jquery回弹_jQuery实现移动端下拉展现新的内容回弹动画

    jQuery移动端下拉展现新的内容动画回弹,供大家参考,具体内容如下 jquery的方法,写的比较细,可以改成原生的这里就不做修改了, 话不多说上代码, 也可以改成下拉刷新 顶部回弹 html,bod ...

  8. jQuery基础，定位标签，下拉菜单，样式操作，获取值（帐号、密码）

    JQuery的是什么? 它是JavaScript的第三方库.是比较主流的网页动态效果实现工具:相比原生JavaScript,JQuery的语法更加简洁,更容易学习.这是jQuery的学习笔记,所以我不 ...

  9. jquery ajax 找到数据怎样放到下拉框里_闲话Excel之简易数据动态图表的制作

    今天早上你的老板和你说让你把今年1-6月份的员工业绩做一份报表发给他,务必简介直观,但是你目前手头就以下的数据: 你肯定不能将这个发给你老板啊,既不简洁也不直观,该咋办呢?我建议用动态图表的方法,且听 ...

最新文章

  1. 程序猿生存指南-35 王旭新巢
  2. opengl 粒子按轨迹运动_袁讲经典4：一个粒子在电场中的运动轨迹相关问题
  3. 不要轻信！那些说月过一万的图片！
  4. Cisco PIX防火墙配置命令大全
  5. c# 调matlab传字符串_C# Matlab 相互调用
  6. ROS Kinetic 与STM32通信，控制一盏LED灯
  7. java jar 源码乱码,java使用jar包时出现乱码的解决方法
  8. 程序员笔记（知识）管理的一点经验
  9. deb包如何改支持12系统_对一个deb包的解压、修改、重新打包全过程方法
  10. Redis实现之对象（三）
  11. DecimalFormat
  12. 06软件构架实践阅读笔记之六
  13. 米斯特白帽培训讲义（v2）实战篇 捷达系统
  14. 1.RABBITMQ 入门 - WINDOWS - 获取，安装，配置
  15. 红帽启动oracle,Redhat6.5 + oracle 11gR2 设置数据库开机自启动
  16. 我的挨踢人物传之又是一年找工作时
  17. echarts源码打包_Echarts模块v1.5更新【更新支持多线程，封装大量快速方法，增加史上最详细示例】...
  18. LM324运放器应用实例
  19. word每行的末尾箭头怎么去掉_word文档后面的箭头怎么去掉
  20. HAUT2021蓝桥杯专题练习第四周记录——贪心

热门文章

  1. TextScanner：旷视新作文字识别新突破，确保字符阅读顺序
  2. 开源/免费数学书大合集：微积分、线代、数分、抽代…数学教授分类整理，精心推荐...
  3. ICCV2021 新增数据集汇总 | 含时序动作定位、时空行为检测、弱光目标检测等！...
  4. 刷新记录！ CVPR2021全新目标检测机制达到SOTA！
  5. 面向小姐姐的编程——java面相对象之抽象
  6. 物体检测方法总结（下）
  7. 庞特里亚金最小值原理求解能耗最小化的时间最优OBVP问题
  8. 存储如何让文件小一点_如何使用Redis接管文件存储
  9. sentinel 端口_Spring Cloud Alibba教程：Sentinel的使用
  10. 华为nova5iotg功能使用_原来华为EMUI10输入法这么强大！使用这个功能，一分钟能打300字...