Question

我创建了一个具有动态创建的行数的表。每行都有一个下拉菜单按钮。

我想从下拉菜单按钮上的下拉菜单中显示所选项目，但无法这样做。下面是我的代码：

<td>
   <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Select
      </button>
      <ul class="dropdown-menu" role="menu" onchange="selectFromDropDown(this.value)">
         <li><a id="option1" selected>option 1</a></li>
         <li><a id="option2">option 2</a></li>
         <li><a id="option3">option 3</a></li>
      </ul>
   </div>
</td>

javascript代码如下

function selectFromDropDown(value){
$(document).ready(function() {
    $(".dropdown-menu li a").click(function(){
        var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
        parent.html($(this).text());
        parent.val($(this).data('value'));
    });
  });
}

Answer 1

尝试用text()代替html()：

parent.text($(this).text());

此外，$(this).data('value'))是undefined。因此属性value将不会设置为任何内容。

我建议您使用$(document).ready(function() {来包装整个代码，而不要在函数内部使用它。

$(document).ready(function() {
  function selectFromDropDown(value){
    $(".dropdown-menu li a").click(function(){
        var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
        parent.text($(this).text().trim());
        parent.val($(this).data('value'));
    });
  }
  
  selectFromDropDown($('.dropdown-menu').val());
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<td>
   <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Select
      </button>
      <ul class="dropdown-menu" role="menu">
         <li><a id="option1" selected>option 1</a></li>
         <li><a id="option2">option 2</a></li>
         <li><a id="option3">option 3</a></li>
      </ul>
   </div>
</td>

从表中动态创建的下拉菜单中选择值

1 个答案: