CODEWITHSUNDEEP
javascripthtmlflaskdrop-down-menubootstrap-4
Rookie
Rookie

Reputation: 755

Select value from dropdown menu which is dynamically created in table

I have a table created with dynamically created number of rows. Every row has a dropdown-menu button.

I want to show the selected item from dropdown-menu on the dropdown-menu button, but am unable to do so. Below is my code:

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

The javascript code is as below

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

Upvotes: 0

Views: 1295

Answers (1)

Mamun
Mamun

Reputation: 68933

Try text() instead of html():

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

Also, $(this).data('value')) is undefined. So the attribute value will not be set to anything.

I will suggest you to use $(document).ready(function() { to wrap the whole code instead of using it inside the 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>

Upvotes: 1

Related Questions