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

【问题标题】：Select value from dropdown menu which is dynamically created in table从表中动态创建的下拉菜单中选择值
【发布时间】：2026-01-06 14:20:06
【问题描述】：

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

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

<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'));
    });
  });
}

【问题讨论】：

你能提供一个你的代码的js小提琴吗？
试试parent.text($(this).text());而不是parent.html($(this).text());

标签： javascript html flask drop-down-menu bootstrap-4

【解决方案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>

【讨论】：