下拉菜单列表单击功能删除活动文本并添加所选文本

Posted 2023-03-05

【中文标题】下拉菜单列表单击功能删除活动文本并添加所选文本

【英文标题】：Dropdown menu list click function remove the active text and add the selected text

【发布时间】：2014-11-23 06:37:37

【问题描述】：

我在使用 Bootstrap 3.2.0 下拉列表时遇到问题。我想要，当用户单击下拉列表然后删除活动文本并将所选文本添加到下拉列表中。

这是 html 代码：

<div class="dropdown dropdown2" tabindex="1">
  <p class="pieces" data-toggle="dropdown">
     <a href="#">Select # of Pieces <i class="fa fa-angle-down"></i></a>
  </p>
  <ul class="dropdown-menu upDropdown" role="menu" aria-labelledby="dLabel">
     <i class="fa fa-caret-down"></i>
     <li>5pc to 30pc</li>
     <li>30pc to 100pc</li>
     <li>100pc to 300pc</li>
     <li>300pc to 500pc</li>
     <li>500pc to 2000pc</li>
  </ul>
</div>

此下拉 HTML 代码在 Bootstrap 3 中运行良好。我不明白哪个 javascript 或 jQuery 函数可用于删除“Select # of Pieces”并从下拉列表中添加文本。

【参考方案1】：

这段代码应该可以工作...

$(document).ready(function()
  $('.dropdown-menu.upDropdown li').click(function()
    $('#selected_piece').html($(this).html());
    );
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown dropdown2" tabindex="1">
  <p class="pieces" data-toggle="dropdown">
     <a href="#"id="selected_piece">Select # of Pieces <i class="fa fa-angle-down"></i></a>
  </p>
  <ul class="dropdown-menu upDropdown" role="menu" aria-labelledby="dLabel">
     <i class="fa fa-caret-down"></i>
     <li>5pc to 30pc</li>
     <li>30pc to 100pc</li>
     <li>100pc to 300pc</li>
     <li>300pc to 500pc</li>
     <li>500pc to 2000pc</li>
  </ul>
</div>

来自维也纳的问候

【参考方案2】：

我能想到的将文本从下拉列表中取出并将该文本放入其他元素的最简单方法是使用 JQuery 选择器来选择当前选定的文本，如下所示：

$('#example-dropdown').change(function() 
     var selectedText = $('#example-dropdown option:selected').text();

     $('#my-output-div').text("Select " + selectedText + " Number of Peices");
);

在哪里

#example-dropdown

是你的或你的下拉菜单的头，并且

#my-output-div

是您希望放置输出的位置。

【讨论】：

注意这个JQuery代码应该放在一个$(document).ready(function());