使用表格中的多个下拉菜单作为选择列表 [英] Use multiple dropdown menus in table as select list

问题描述

所以我有一个用户表，我想在表中添加一列，在这里我可以使用引导程序下拉菜单将用户的状态更改为活动/不活动.这是表格的代码:

so i have a users table, and i wanna add a column to the table where i can get to change the status of the user to active/inactive using bootstrap dropdown menu. here is the code for the tables:

<table class="table">
<thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Active
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Active</a>
          <a class="dropdown-item" href="#">Inactive</a>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Active
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Active</a>
          <a class="dropdown-item" href="#">Inactive</a>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Active
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Active</a>
          <a class="dropdown-item" href="#">Inactive</a>
        </div>
      </div>
    </td>
  </tr>
</tbody>

我在最后添加了一个JQuery代码段.此代码段的作用是根据单击的dropdown-item更改dropdown-menu标签.

i added a JQuery snippet at the end. what this snippet does is changing the dropdown-menu label based on the clicked dropdown-item.

$(function(){
   $(".dropdown-menu").on('click', 'a', function(){
   $(".btn:first-child").text($(this).text());
   $(".btn:first-child").val($(this).text());
   });
});

当我更改一条记录的状态时，所有其他记录都会受到该更改的影响.我尝试使用.find()和.siblings()之类的功能，甚至还使用了id="dropdownMenuButton"，但无法修复.有人可以帮我解决这个问题.

when i change one record's status all other records are effected with that change. i tried using functions like .find() and .siblings() and even taking off the id="dropdownMenuButton" but couldn't fix it. could someone help me get around this issue.

推荐答案

您似乎不了解jQuery代码段的工作方式.应该是:

It looks like you don't understand how the jQuery snippet works. It should be:

$(function(){
   $(".dropdown-menu").on('click', 'a', function(){
       $(this).parents('.dropdown').find('button').text($(this).text());
   });
});

https://www.codeply.com/go/SkKl0OPReI

这篇关于使用表格中的多个下拉菜单作为选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！