javascript - Jquery Bootstrap Dropdown 在使用 PHP 中的 foreach 循环填充的表中不起作用

Question

我正在填充数据库中的数据并将其显示在表中。其中一列是“状态”，其中有一个包含 2 个值的下拉列表 - 可用和不可用。

下拉菜单适用于第一行，但不适用于其余行。即使我们从任何其他行(第一行除外)的下拉列表中选择一个值，该值也会反射(reflect)在第一行的下拉列表中。

我希望能够为每一行单独选择值。

注意:我使用 PHP 和 MySQL 以及 Bootstrap

<div class="box-body table-responsive no-padding">
  <table class="table table-hover">
  <?php 
   $servername = "localhost";
   $username = "root";
   $password = "";
   $dbname = "mirchi";

   $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
   // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


 $menu = $conn -> query("Select * from menu"); ?> 

    <tr>

      <th>Item ID</th>
      <th>Item Name</th>
      <th>Item Description</th>
      <th>Item Price</th>
      <th>Item Qty</th>
      <th>Item Type</th>                                           
      <th>Status</th>
      <th>Manage</th>
    </tr>
      <?php
       foreach ($menu as $row) {


       echo "<tr>";                                        
       echo "<td>".$row['ItemId']."</td>";
       echo "<td>".$row['ItemName']."</td>";
       echo "<td>".$row['ItemDesc']."</td>";                                   
       echo "<td>".$row['ItemPrice']."</td>"; 
       echo "<td>".$row['ItemQty']."</td>";
       echo "<td>".$row['ItemType']."</td>";   ?>                              
       <td class="dropdown">
       <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
       <button type="button" id="color-chooser-btn" class="btn btn-danger  btn-block btn-sm dropdown-toggle" data-toggle="dropdown">Status <span class="caret"></span></button>
       <ul class="dropdown-menu" id="color-chooser">
       <li><a class="text-green" href="#"><i class="fa fa-square"></i> Available </a></li>
       <li><a class="text-red" href="#"><i class="fa fa-square"></i> Not Available</a></li>
       </ul>
     </div>

   </td>
   <td>
   <a data-toggle="modal" data-target="#compose-modal">
   <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button></a>
   <a data-toggle="modal" data-target="#delete-modal">
   <button class="btn btn-primary btn-xs"><i class="fa fa-trash-o"></i></button></a>
   </td>
   <?php 
   echo "</tr>";
   } ?>
   </table>
   </div>

脚本

    <!-- jQuery UI 1.10.3 -->
    <script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AdminLTE App -->
    <script src="js/AdminLTE/app.js" type="text/javascript"></script>
    <!-- fullCalendar -->
    <script src="js/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
    <!-- Page specific script -->
    <script type="text/javascript">
        $(function() {

            /* initialize the external events
             -----------------------------------------------------------------*/
            function ini_events(ele) {
                ele.each(function() {

                    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                    // it doesn't need to have a start or end
                    var eventObject = {
                        title: $.trim($(this).text()) // use the element's text as the event title
                    };

                    // store the Event Object in the DOM element so we can get to it later
                    $(this).data('eventObject', eventObject);

                    // make the event draggable using jQuery UI
                    $(this).draggable({
                        zIndex: 1070,
                        revert: true, // will cause the event to go back to its
                        revertDuration: 0  //  original position after the drag
                    });

                });
            }
            ini_events($('#external-events div.external-event'));



            /* ADDING EVENTS */
            var currColor = "#f56954"; //Red by default
            //Color chooser button
            var colorChooser = $("#color-chooser-btn");
            $("#color-chooser > li > a").click(function(e) {
                e.preventDefault();
                //Save color
                currColor = $(this).css("color");
                //Add color effect to button
                colorChooser
                    .css({"background-color": currColor, "border-color": currColor})
                    .html($(this).text()+' <span class="caret"></span>');
            });
            $("#add-new-event").click(function(e) {
                e.preventDefault();
                //Get value and make sure it is not null
                var val = $("#new-event").val();
                if (val.length == 0) {
                    return;
                }

                //Create event
                var event = $("<div />");
                event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
                event.html(val);
                $('#external-events').prepend(event);

                //Add draggable funtionality
                ini_events(event);

                //Remove event from text input
                $("#new-event").val("");
            });
        });
    </script>

Answer 1

对于数据集中的每个项目，您将添加一个具有相同 ID 的下拉列表。元素 id 必须是唯一的，我会保留 id 并选择一个类。您还需要更改 jQuery 单击处理程序。

$('ul.color-chooser > li > a').click(function(e) {
    e.preventDefault();
    var $this = $(this);

    // get the chooser button
    var colorChooser = $this.closest('div.btn-group').find('.btn');

    //Save color
    var currColor = $this.css("color");

    //Add color effect to button
    colorChooser
      .css({
        "background-color": currColor,
        "border-color": currColor
      })
      .html($this.text() + ' <span class="caret"></span>');
  });

ul.dropdown-menu a.text-green,
ul.dropdown-menu a.text-green:hover {
  color: green;
}
ul.dropdown-menu a.text-red,
ul.dropdown-menu a.text-red:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" style="width: 100%; margin-bottom: 10px;">
  <button type="button" class="btn btn-danger btn-block btn-sm dropdown-toggle color-chooser-btn" data-toggle="dropdown">Status <span class="caret"></span>
  </button>
  <ul class="dropdown-menu color-chooser">
    <li><a class="text-green" href="#"><i class="fa fa-square"></i> Available </a>
    </li>
    <li><a class="text-red" href="#"><i class="fa fa-square"></i> Not Available</a>
    </li>
  </ul>
</div>