在JS中实现点击下拉菜单内容同步输入框

下面我就为大家分享一篇js实现点击下拉菜单把选择的内容同步input输入框内的实例,具有很好的参考价值,希望对大家有所帮助。

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

在JS中实现点击下拉菜单内容同步输入框

这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来

     

登录后复制    account        drive        qing     

我的目的是当我点击这个下拉菜单中的某个选项的时候,能够自动获取到值,填写到input中,这样就省去了之前版本只有一个input还得用户自己手动打的麻烦。怎么做同步呢,当然是用js去做个监听了,也比较简单。

$("#project").on("click", "li", function(){ $("#proname").val($(this).text());});

登录后复制

这段代码的意思就是,监听ul的点击事件,对象是下面的li元素,当点击li的时候,获取到li中的text文本赋值给input输入框的value,实现的效果如下图。

在JS中实现点击下拉菜单内容同步输入框

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue中如何使用cli请求代理与项目打包方面的问题

在vue中如何使用cli请求代理与项目打包方面的问题

在vue中如何使用cli请求代理与项目打包方面的问题

在vue中如何使用cli请求代理与项目打包方面的问题

在vue中如何使用cli请求代理与项目打包方面的问题

在vue中如何使用cli请求代理与项目打包方面的问题

在vue中如何使用cli请求代理与项目打包方面的问题

在vue中如何使用cli请求代理与项目打包方面的问题

在vue中如何使用cli请求代理与项目打包方面的问题

以上就是在JS中实现点击下拉菜单内容同步输入框的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3185794.html

(0)
上一篇 2025年3月31日 22:37:15
下一篇 2025年3月31日 22:37:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何在Laravel中正确使用input方法

    标题:如何在Laravel中正确使用input方法 在Laravel中,我们经常需要从请求中获取用户输入的数据,并进行验证和处理。而input方法则是一种常用的方法来获取用户输入的数据。在本文中,我们将介绍如何在Laravel中正确使用in…

    2025年5月2日
    000
  • 掌握Laravel中input方法的最佳实践

    Laravel框架是当今最受欢迎的PHP开发框架之一,它为开发者提供了丰富的功能和便捷的方法来构建Web应用程序。其中,input方法是Laravel中非常常用的方法之一,用于获取用户输入的数据。在本文中,我们将探讨如何最好地使用input…

    2025年5月2日
    000
  • 使用js实现微信唤起支付宝领红包(详细教程)

    最近支付宝的领红包可真是刷爆了各个微信群啊,满群都是支付宝口令,可是这样推广很麻烦,下面我给大家带来了js实现微信/qq直接跳转到支付宝app打开口令领红包功能,需要的朋友参考下 最近支付宝的领红包可真是刷爆了各个微信群啊,满群都是支付宝口…

    2025年5月1日 编程技术
    000
  • 深入浅出Bootstrap中的下拉菜单

    本篇文章给大家详细介绍一下bootstrap中的下拉菜单。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换、有上下…

    2025年5月1日 编程技术
    000
  • ADMX3652-便携六位半电压表

    adi最近悄悄发布了一个令人惊叹的便携式测量硬件——一个六位半的仪器,真是让人眼前一亮。可惜的是,它并没有开源,未来是否会开源还是个未知数。 六位半的精度表示测量值的第一位仅限于正负号和0/1,称为½位,而其他位数可以显示0到9,称为一位。…

    2025年4月30日 互联网
    000
  • 浅析html input 等值改变添加监听事件

    要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等。只要我们能捕获即时事件就…

    编程技术 2025年4月4日
    100
  • input中id和name属性的区别示例介绍分析

    到现在还没有搞明白input中name和id的区别,在学习中遇到了这个问题,将搜集的资料整理出来以备后用做网站很久了,但到现在还没有搞明白input中name和id的区别,最近学习jquery,又遇到这个问题,就在网上搜集资料。看到这篇,就…

    编程技术 2025年4月4日
    100
  • 怎样实现html的可输入下拉菜单

    这次给大家带来怎样实现html的可输入下拉菜单,实现html的可输入下拉菜单的下拉菜单有哪些,下面就是实战案例,一起来看一下。      <?php echo '     汽车   火车   飞机      ‘; $aa=$…

    编程技术 2025年4月4日
    100
  • html可输入下拉菜单应该如何编写

    这次给大家带来html可输入下拉菜单应该如何编写,编写html可输入下拉菜单的下拉菜单有哪些,下面就是实战案例,一起来看一下。 代码如下:      <?php echo '     汽车   火车   飞机      ‘;…

    编程技术 2025年4月4日
    100
  • 在html中怎样可以做到下拉菜单提交后保留选中值不返回默认值

    这次给大家带来在html中怎样可以做到下拉菜单提交后保留选中值不返回默认值,在html中做到下拉菜单提交后保留选中值不返回默认值的注意事项有哪些,下面就是实战案例,一起来看一下。 代码如下:     登录后复制   相信看了这些案例你已经掌…

    编程技术 2025年4月4日
    100

发表回复

登录后才能评论