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

Dropdown menu list click function remove the active text and add the selected text

本文关键字：文本 添加 活动 删除 列表 功能 下拉菜单      更新时间：2023-09-26

我对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#ofPieces"并从下拉列表中添加文本。

此代码应该可以工作。。。

$(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>

来自维也纳的问候

我能想到的从下拉列表中取出文本并将该文本放入其他元素的最简单方法是使用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

是要放置输出的位置。

相关文章：