我正在开发一个 PHP 站点，需要允许用户选择数据并在下一个 DIV 上显示不同的数据（参见附图）。本质上，我希望使用 SQL SELECT 语句填充 DIV（溢出：自动，因此它会滚动），并允许用户单击列表项。如果有意义的话，该项目会为右侧的 div 创建一个新的 SELECT 语句。关于解决此问题的最佳方法的任何意见？ PHP 新手，但不是 HTML/CSS。
扎克
【问题讨论】：
我认为最好的方法是使用 jQuery（一个 JavaScript 库）。 I 非常易于使用，如果你掌握了诀窍，你可以用它做出惊人的事情。
对于 PHP/MySQL，您可以使用 jQuerys Ajax 功能（请参阅http://api.jquery.com/jQuery.ajax/）。使用回调显示加载的数据（见下文）。
这是一个非常简单的示例，说明如何使用动态内容显示另一个 div（其中可能是更多可供选择的链接）。如果你把它和 Ajax 结合起来，你应该得到你所需要的。
在 head 标签中包含 jQuery：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
正文代码：
<!-- First Box: click on link shows up second box -->
<div id="selectOne" style="float: left; margin-right: 10px; border: #666 thin solid; padding: 10px;">
<a href="#" id="one">One</a><br />
<a href="#" id="two">Two</a><br />
<a href="#" id="three">Three</a>
</div>
<!-- Second Box: initially hidden with CSS "display: none;" -->
<div id="selectTwo" style="float: left; margin-right: 10px; display: none; border: #666 thin solid; padding: 10px;"></div>
<!-- The JavaScript (jQuery) -->
<script type="text/javascript">
//Do something when the DOM is ready:
$(document).ready(function() {
//When a link in div with id "selectOne" is clicked, do something:
$('#selectOne a').click(function() {
//Fade in second box:
$('#selectTwo').fadeIn(500);
//Get id from clicked link:
var id = $(this).attr('id');
//Depending on the id of the link, do something:
if (id == 'one') {
//Insert html into the second box which was faded in before:
$('#selectTwo').html('One<br />is<br />selected')
} else if (id == 'two') {
$('#selectTwo').html('Two<br />is<br />selected')
} else if (id == 'three') {
$('#selectTwo').html('Three<br />is<br />selected')
}
});
});
</script>
因此，如果您要使用 jQuerys Ajax-Functionality，您可以使用类似的东西（未经测试！）：
$('#selectOne a').click(function() {
var id = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'getYourData.php',
data: 'thisIsSentToPHPFile='+id,
success: function(msg){
//everything echoed in your PHP-File will be in the 'msg' variable:
$('#selectTwo').html(msg)
$('#selectTwo').fadeIn(500);
}
});
});
getYourData.php 可能是：
$id = $_POST['id'];
$query = mysql_query('SELECT * FROM table WHERE id='.$id);
$result = mysql_fetch_assoc($query);
//Now echo the results - they will be in the callback variable:
echo $result['tablefield1'].', '.$result['tablefield2'];
试一试，稍微调整一下，你应该就能让它工作了。
【讨论】：
最直接的方法可能是将正确的部分设为 iframe。
那么中间列表中的每个项目都可以是这样的链接：
<a href="displaySubItems.php?company=2" target="rightColumn">Company 2</a>
在 displaySubItems.php 中，您将使用您的 select 语句中的 $_GET['company'] 值来填充表格。
您也可以使用 AJAX 方法来填充右侧的表格，尽管我个人对 AJAX 不太熟悉，所以我无法告诉您更多相关信息。我还怀疑 iframe 得到了更广泛的支持。
编辑：根据您的一个 cmets 更改了一些部分
【讨论】：