Jquery Bootstrap Dropdown 在使用 PHP 中的 foreach 循环填充的表中不起作用
Posted
技术标签:
【中文标题】Jquery Bootstrap Dropdown 在使用 PHP 中的 foreach 循环填充的表中不起作用【英文标题】：Jquery Bootstrap Dropdown not working in table which is being populated using foreach loop in PHP 【发布时间】：2016-05-03 10:14:48 【问题描述】：我正在从数据库中填充数据并将其显示在表中。其中一列是“状态”，它有一个包含 2 个值的下拉列表 - 可用和不可用。
下拉菜单适用于第一行，但不适用于其余行。即使我们从任何其他行（第一行除外）的下拉列表中选择一个值，该值也会反映在第一行的下拉列表中。
我希望能够为每一行分别选择值。
注意：我正在使用 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>
【问题讨论】：
Id 必须是唯一的...#color-chooser...尝试改用类
如果我使用类，整个表格的下拉值都会改变。
【参考方案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>【讨论】：
感谢 travis :) 这对我有用！！虽然我已经修复了类和 id 部分.. 我仍然坚持使用 jquery 位！非常感谢:)以上是关于Jquery Bootstrap Dropdown 在使用 PHP 中的 foreach 循环填充的表中不起作用的主要内容，如果未能解决你的问题，请参考以下文章