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输入框的完整示例,供读者参考。

作者最新文章