Question

我遇到了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函数可以删除＆＃34;选择#cieces＆＃34;并从下拉列表中添加文本。

Answer 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>

来自维也纳的问候

Answer 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

您希望输出的位置。

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

2 个答案: