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

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')) 是未定义。因此属性 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>