JS实现点击下拉菜单把选择的内容同步到input输入框内的实例


Posted in Javascript onJanuary 23, 2018

最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示

JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

这里有一个输入框组,下拉菜单里面有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,实现的效果如下图。

JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

以上这篇JS实现点击下拉菜单把选择的内容同步到input输入框内的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 #Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 #Javascript
浅谈vue项目重构技术要点和总结
Jan 23 #Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 #Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 #Javascript
three.js 入门案例详解
Jan 23 #Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 #Javascript
You might like
php cookis创建实现代码
2009/03/16 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
js中判断控件是否存在
2010/08/25 Javascript
javascript数组去掉重复
2011/05/12 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Tornado 多进程实现分析详解
2018/01/12 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
掌上明珠Java程序员面试总结
2016/02/23 面试题
个人自我鉴定写法
2013/11/30 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
运动会跳远广播稿
2014/02/04 职场文书
2013年军训通讯稿
2014/02/05 职场文书
主管会计岗位责任制
2014/02/10 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python