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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
laravel学习教程之存取器
2016/07/30 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
js常用DOM方法详解
2017/02/04 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
python聊天程序实例代码分享
2013/11/18 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Python实现简易Web爬虫详解
2018/01/03 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
python让函数不返回结果的方法
2020/06/22 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
什么是数据抽象
2016/11/26 面试题
材料员岗位职责
2014/03/13 职场文书
小学教师个人总结
2015/02/05 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
结婚纪念日感言
2015/08/01 职场文书
交通安全教育心得体会
2016/01/15 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
讨论nginx location 顺序问题
2022/05/30 Servers