JS实现点击下拉菜单同步内容到Input输入框
作者:闭包旅人时间:2026-10-22 11:58:47浏览:600
本文介绍如何使用JavaScript监听Bootstrap下拉菜单的点击事件,将选中的列表项文本自动赋值给关联的Input输入框,实现用户无需手动输入即可同步数据的功能。
场景背景与需求
最近在结合Flask开发测试平台的过程中,遇到了一个常见的交互场景,如图所示。

界面包含一个输入组件组,其中下拉菜单提供三个选项,旁边配有一个输入框。该界面基于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>
JavaScript实现逻辑
核心需求是:当用户点击下拉菜单中的特定选项时,系统应自动获取该选项的值,并填入旁边的Input输入框中。这一改进旨在替代旧版仅依赖手动输入的繁琐操作,提升用户体验。实现这一同步功能的关键在于使用JavaScript进行事件监听,逻辑相对简单。
$("#project").on("click", "li", function(){
$("#proname").val($(this).text());
});
具体实现逻辑为:监听ID为project的ul元素的点击事件,目标元素为内部的li标签。当用户点击某个li时,提取该li标签内的文本内容,并将其赋值给ID为proname的Input输入框的value属性,从而完成数据同步。最终效果如截图所示。

以上即为利用JavaScript实现点击下拉菜单并将选择内容同步至Input输入框的完整示例,供读者参考。
作者最新文章
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
