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 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 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设计模式 Command(命令模式)
2011/06/26 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
DOM相关内容速查手册
2007/02/07 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
python编写实现抽奖器
2020/09/10 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
火锅店的活动方案
2014/08/15 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android