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

我在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代码在Bootstrap3中运行良好。我不知道哪种JavaScript或jQuery函数可以用于从下拉列表中删除片段选择并添加文本。

这段代码应该可以

$document.readyfunction{ $'。下拉菜单。下拉列表。单击功能{ $'selected_piece'.html$this.html； }; };

5至30件 30件到100件 100件到300件 300件到500件 500件到2000件

---

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