JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
作者：长歌丶 发布时间：2023-09-08 19:50:10
标签：JS,下拉菜单,同步,input,输入框
最近博主在边学flask边写测试平台，碰到一个比较常用的场景如下图所示
这里有一个输入框组，下拉菜单里面有3个选项，还有一个输入框，代码是用 bootstrap写的，代码也给大家贴出来
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
项目名称
<span class="caret"></span>
</button>
<ul id="project" class="dropdown-menu">
<li value="account"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >account</a></li>
<li class="divider"></li>
<li value="drive"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >drive</a></li>
<li class="divider"></li>
<li value="qing"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qing</a></li>
</ul>
</div>
我的目的是当我点击这个下拉菜单中的某个选项的时候，能够自动获取到值，填写到input中，这样就省去了之前版本只有一个input还得用户自己手动打的麻烦。怎么做同步呢，当然是用js去做个监听了，也比较简单。
$("#project").on("click", "li", function(){
$("#proname").val($(this).text());
});
这段代码的意思就是，监听ul的点击事件，对象是下面的li元素，当点击li的时候，获取到li中的text文本赋值给input输入框的value，实现的效果如下图。
来源：http://blog.csdn.net/qq_14908027/article/details/78610846
0
投稿猜你喜欢
- Web_THBC 为表示层也就是页面（.aspx） BLL_THBC 为业务逻辑层 DAL_THBC 为数据库交互层 （向数据库执行SQL语
- 一 描述720. 词典中最长的单词 - 力扣（LeetCode） (leetcode-cn.com)给出一个字符串数组 words
- 大部分数据库管理员拥有某种形式的数据库元数据库，他们依赖其来跟踪范围很广的Microsoft SQL Server环境。我利用连接的服务器和
- 最近，在项目开发过程中，碰到了数据库死锁问题，在解决问题的过程中，笔者对MySQL InnoDB引擎锁机制的理解逐步加深。案例如下：在使用S
- [Q]怎么样查询特殊字符，如通配符％与_ [Q]如何插入单引号到数据库表中 [Q]怎样设置事务一致性 [Q]怎么样利用光标更新数据 [Q]怎
- 本文实例讲述了asp.net C#实现解压缩文件的方法。一共给大家介绍了三段代码，一个是简单的解压缩单个zip文件，后一个可以解压批量的大量
从信息组织角度来看，段落内行之间的关系要比段落之间的关系低一个级别，所以在呈现上段落之间的“段距”应该大于段落之内的“行距”，如此才能一目了- CSS 盒模型网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：如果是 Firebug 用户的话(基本和前端有关的
- 网站上的Banner条，是网站用来作为盈利或者是发布一些重要的信息的工具。但是它又不能作为网页的主要内容，因为它的主要目的是吸引人的注意力，
- 【摘 要】 我只是提供我几个我认为有助于提高写高性能的asp.net应用程序的技巧，本文提到的提高asp.net性能的技巧只是一个起步，更多
- 微软在去年可谓是动作比较大的一年，在去年3月份推出了最新版的IE8浏览器，而在年底又发布全新的操作系统Windows 7，自此新产品的市场占
- 一个ASP文件通常包含HTML标签，有时和一个HTML文件非常类似。然而，ASP文件（除了包含HTML标签外），还可以包括服务器的脚本程序，
- 这是一篇关于使用JScript RuntimeObject（MSDN）调试的文章。虽然这些例子中的大多数在其他浏览器中不能运行，但在IE 5
- 类 型描 述EmptyVariable 没有被初始化，它是数字的话，它的值就为0,如果它是字符串，那么它的值就为1N
- 桥接模式（Bridge Pattern）是什么桥接模式是一种结构型模式，它将抽象部分与实现部分分离开来，使它们可以独立地变化。在桥接模式中，
- 这篇文章详细的介绍了Oracle数据库SQL语句性能调整的基本原则，具体内容请参考下文。一、问题的提出在应用系统开发初期，由于开发数据库数据
- tips：如果根目录下有favicon.ico，可省去<link rel="shortcut icon" ...&
- 1、纯粹的截取字符串function cutstr(thestr1,strlen) dim l,t,c&nbs
- PHP addAttribute() 函数实例给根元素和 body 元素添加一个属性：<?php $note=<<<
- 什么是RC4算法呢?也许您还不知道，没关系我为您找了下相关资料方便大家查看；RC4加密算法 RC4加密算法是大名鼎鼎的RSA三人组
