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，实现的效果如下图。

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

赞 (0)

相关推荐

  • 实时监控input框,实现输入框与下拉框联动的实例

    如图: html代码 <tr> <th scope="row">奖励类型:</th> <td><input value="" type="text" name="item" id="reward" style="width: 60px;height: 20px;" placeholder="输入关键字" />

  • js下拉选择框与输入框联动实现添加选中值到输入框的方法

    js下拉选择框与输入框联动实现添加选中值到输入框的方法

    本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法.分享给大家供大家参考.具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果.这种效果相信不少朋友见到过吧,省去用户输入的麻烦,这里使用JS直接将值赋予输入框,了解原理之后,可灵活运用,扩展出更多的特效来. 运行截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-value-to-input-codes/ 具体代码如下: <html> <

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

    最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示 这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来 <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"

  • BootStrap点击下拉菜单项后显示一个新的输入框实现代码

    我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的. 假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框:点击B时显示图像上传框,隐藏文本输入框,请问怎么实现? 用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事. 我的js代码如下(定义在<head>部分中): <script type=&quo

  • js 单击式的下拉菜单效果实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js动态设置select下拉菜单的默认选中项实例

    利用javascript设置select下拉菜单的选中项. 代码实例如下: <!--js动态设置select下拉菜单的默认选中项--> <html> <head> <title>下拉菜单</title> <script type="text/javascript"> window.onload=function(){ var osel=document.getElementById("selID"

  • js面向对象封装级联下拉菜单列表的实现步骤

    js面向对象封装级联下拉菜单列表的实现步骤

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时,选择菜单后会在文本框中显示. 打开后的级联菜单效果如图所示: 使用实例中封装好的插件,只需要有一个input元素,即可通过插件自动生成级联下拉菜单,html代码如下所示: <div style="margin-top:100px;text-align:center;"> <

  • 基于JS快速实现导航下拉菜单动画效果附源码下载

    基于JS快速实现导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&

  • js实现按钮开关单机下拉菜单效果

    js实现按钮开关单机下拉菜单效果

    通过onclick单击事件,实现效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开关按钮设置</title> </head> <link rel="stylesheet" href="css/Default style sheet.css" rel="exte

  • 纯JS实现出生日期[年月日]下拉菜单效果

    在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用JS实现年.月.日3个下拉框的日期选择.具体代码如下: 1.新建一个js文件,如birthday.js; function DateSelector(selYear, selMonth, selDay) {//定义函数 this.selYear = selYear; this.selMonth = s

  • JS组件Bootstrap实现下拉菜单效果代码

    JS组件Bootstrap实现下拉菜单效果代码

    Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容:

  • JS实多级联动下拉菜单类，简单实现省市区联动菜单！

    作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.

随机推荐