我一整天都在盯着代码，而我似乎无法找到我想要的东西，我知道如何用PHP做到这一点，但我是动态新手。
此代码位于由数据库生成的循环内。下拉项目是固定的，但每个人都在数据库中。我希望能够根据第一个选择下一个下拉框选择。此代码有效，但不适用于循环中的每个人。循环中的每个项目只更新顶部项目。
<div class="grid-container-fluid" style="margin-bottom: 25px;">
<div class="grid-container" style="font-family: 'Roboto Condensed', sans-serif;">
<div class="grid-x align-center">
<div class="large-10 cell">
<div class="grid-x">
<?php
if ($result->num_rows > 0) {
echo '<div class="large-12 cell">';
echo '<p style="font-family: Roboto Condensed, sans-serif; letter-spacing: 2px; font-weight: bold; line-height:1; font-size: 30px;">ADMIN PANEL:</p>';
echo '<p style="font-family: Roboto Condensed, sans-serif; font-size: 20px;">Income: $'.$total.'/mo<br>Program Value: $'.$value.'/person</p>';
echo '</div>';
echo '<div class="large-12 hide-for-small-only cell" style="border-bottom: 3px black solid; padding-bottom: 5px;">';
echo '<div class="grid-x">';
echo '<div class="medium-auto small-6 cell">';
echo '<p align="left" style="margin: 0;">NAME</p>';
echo '</div>';
echo '<div class="medium-auto small-6 cell">';
echo '<p align="left" style="margin: 0;">EMAIL</p>';
echo '</div>';
echo '<div class="medium-auto small-6 cell">';
echo '<p align="left" style="margin: 0;">PROGRAM</p>';
echo '</div>';
echo '<div class="medium-auto small-6 cell">';
echo '<p align="left" style="margin: 0;">PLAN</p>';
echo '</div>';
echo '<div class="medium-2 small-6 cell">';
echo '<p align="left" style="margin: 0;">STATUS</p>';
echo '</div>';
echo '<div class="medium-1 small-12 cell" style="padding-left: 15px;">';
echo '<p style="margin:0; text-align: center">';
echo '<i class="fi-wrench"></i>';
echo '</p>';
echo '</div>';
echo '</div>';
echo '</div>';
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<div class="large-12 cell" style="border-bottom: 1px black solid; padding: 5px;">';
echo '<div class="grid-x align-middle">';
echo '<div class="medium-auto small-12 cell" style="padding:2px;">';
echo '<input style="background-color: white; border: 0; margin: 0;" value="'.$row["name"].'" name="name">';
echo '</div>';
echo '<div class="medium-auto small-12 cell" style="padding:2px;">';
echo '<input style="background-color: white; border: 0; margin: 0;" value="'.$row["email"].'" name="email">';
echo '</div>';
echo '<div class="medium-auto small-12 cell" style="padding:2px;">';
echo '<select style="margin: 0; height: auto; border: 0;" name="program" id="program" onChange="changecat(this.value, '.$value.');">';
echo '<option value="" disabled selected>'.$row["program"].'</option>';
echo '<option value="Hockey">Hockey</option>';
echo '<option value="Fundamentals">Fundamentals</option>';
echo '</select>';
echo '</div>';
echo '<div class="medium-auto small-12 cell" style="padding:2px;">';
echo '<select style="margin: 0; height: auto; border: 0;" name="plan" id="plan">';
echo '<option value="" disabled selected>'.$row["plan"].'</option>';
echo '</select>';
echo '</div>';
?>
<script>
var programsByplan = {
Hockey: ["Off Season", "Pre Season", "In Season"],
Fundamentals: ["Phase 1"],
}
function changecat(value) {
if (value.length == 0) document.getElementById("plan").innerHTML = "<option></option>";
else {
var catOptions = "";
for (planId in programsByplan[value]) {
catOptions += "<option>" + programsByplan[value][planId] + "</option>";
}
document.getElementById("plan").innerHTML = catOptions;
}
}
</script>
<?php
echo '<div class="medium-2 small-12 cell">';
echo '<div class="grid-x align-middle">';
echo '<div class="small-6 cell">';
echo '<select style="margin: 0; height: auto; border: 0;" name="week">';
echo '<option value="'.$row["week"].'">' . 'Week ' . $row["week"] . '</option>';
echo '<option value="1">Week 1</option>';
echo '<option value="2">Week 2</option>';
echo '<option value="3">Week 3</option>';
echo '<option value="4">Week 4</option>';
echo '<option value="5">Week 5</option>';
echo '<option value="6">Week 6</option>';
echo '<option value="7">Week 7</option>';
echo '<option value="8">Week 8</option>';
echo '<option value="9">Week 9</option>';
echo '<option value="10">Week 10</option>';
echo '<option value="11">Week 11</option>';
echo '<option value="12">Week 12</option>';
echo '<option value="13">Week 13</option>';
echo '<option value="14">Week 14</option>';
echo '<option value="15">Week 15</option>';
echo '</select>';
echo '</div>';
echo '<div class="small-6 cell">';
echo '<select style="margin: 0; height: auto; border: 0;" name="day">';
echo '<option value="'.$row["day"].'">' . 'Day ' . $row["day"] . '</option>';
echo '<option value="1">Day 1</option>';
echo '<option value="2">Day 2</option>';
echo '<option value="3">Day 3</option>';
echo '<option value="4">Day 4</option>';
echo '</select>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="medium-1 small-12 cell" style="padding-left: 15px;">';
echo '<p style="margin:0; text-align: center">';
echo '<input style="font-size: 12px;" class="expanded button nav" type="submit" value="Update" name="submit" id="submit"/>';
echo '</p>';
echo '</div>';
echo '</div>';
echo '</div>';
}
}
?>
</div>
</div>
</div>
</div>
</div>
我知道它需要一个唯一的ID，我无法弄清楚在哪里。
答案 0 :(得分：-1)
这样的事情：
echo '<div class="medium-auto small-12 cell" style="padding:2px;">';
echo '<select style="margin: 0; height: auto; border: 0;" name="program" id="program-'.$row['id'].'" >';
echo '<option value="" disabled selected>'.$row["program"].'</option>';
echo '<option value="Hockey">Hockey</option>';
echo '<option value="Fundamentals">Fundamentals</option>';
echo '</select>';
echo '</div>';
echo '<div class="medium-auto small-12 cell" style="padding:2px;">';
echo '<select style="margin: 0; height: auto; border: 0;" name="plan" id="plan-'.$row['id'].'">';
echo '<option value="" disabled selected>'.$row["plan"].'</option>';
echo '</select>';
echo '</div>';
?>
<script>
var programsByplan = {
Hockey: ["Off Season", "Pre Season", "In Season"],
Fundamentals: ["Phase 1"],
}
$('select[name="program"]').change(function(){
var program = $(this).val();
var plan_id = $(this).prop('id').replace('program', 'plan');
if(programsByplan[program]){
var options = [];
$.each(programsByplan[program], function(i,v){
options.push('<option value="'+v+'">'+v+'</option>');
});
$('#'+plan_id).html(options.join("\n"));
}else{
//or, do somkind of error recovery here.
$('#'+plan_id).html('<option value="">No Plans</option>');
}
});
</script>
我会摆脱onChange，我也在大量使用jQuery，但问题是用它标记的。
因此，在更改任何名称为program的选项时（我们尚未更改，因此它们都具有相同的名称），我们会触发事件回调。当然，你也可以用课来做这部分。
在回调中，我们得到当前选择中选择的值，然后我们检查它是否存在于programsByplan中（它总是应该存在），但不会检查它。
然后我们将程序ID program-'.$row['id'].'转换为plan-'.$row['id'].'。现在我们知道选择改变哪个计划。我更喜欢使用数组来添加选项，但您可以执行+=操作。然后，现在我们知道了计划元素id，用.html()替换它们是一件简单的事情。
我还没有对此进行过测试，但它应该非常接近。最重要的是让id易于关联，或者换句话说很容易为更改的plan元素找到正确的program元素。
我还假设你有一个$row['id']，它至少对生成这些的循环是唯一的。
但是，当数据库中的程序/计划适当时，如何获得显示页面加载的选项
我会进一步改变它：
//outside of the loop define your data
$programsByplan = [
'Hockey' => ["Off Season", "Pre Season", "In Season"],
'Fundamentals' => ["Phase 1"],
];
//inside the loop
echo '<div class="medium-auto small-12 cell" style="padding:2px;">';
echo '<select style="margin: 0; height: auto; border: 0;" name="program" id="program-'.$row['id'].'" >';
foreach($programsByplan as $program => $plans){
//$selected = $row["program"] == $program ? 'disabled selected' : '';
$selected = $row["program"] == $program ? 'selected="selected"' : '';
echo '<option value="'.$program.'" '.$selected.'>'.$program.'</option>';
}
echo '</select>';
echo '</div>';
echo '<div class="medium-auto small-12 cell" style="padding:2px;">';
echo '<select style="margin: 0; height: auto; border: 0;" name="plan" id="plan-'.$row['id'].'">';
foreach($programsByplan[$row["program"]] as $plan){
//$selected = $row["plan"] == $plan ? 'disabled selected' : '';
$selected = $row["plan"] == $plan ? 'selected="selected"' : '';
echo '<option value="'.$plan.'" '.$selected.'>'.$plan.'</option>';
}
echo '</select>';
echo '</div>';
?>
<script>
var programsByplan = <?php echo json_encode($programsByplan); ?>;
//... other code
这里我们在PHP中添加$programsByplan，然后使用json_encode我们可以将相同的数组添加到Javascript中，这非常棒。希望这有效
var programsByplan = <?php echo json_encode($programsByplan); ?>;
有时它可能需要一些摆弄，但它在代码的可维护性方面具有巨大的好处。因为您只使用一个权威来源来获取数据。而不是它到处传播。这样做的另一个好处是，如果您将程序和计划作为两个具有多对一关系的表格，您可以将它们放在数据库中，并通过构建该数组轻松更新代码。看看数据是否只是硬编码，然后很难做出类似的更改。
它还允许我们解决您最初构建选择时遇到的一些其他问题，并简化代码。一个重要的问题是删除所选项目的值，并重复项目。
echo '<option value="" disabled selected>'.$row["program"].'</option>';
你实际上是在这里删除了值，这可能不是你想要的。我也不确定disabled位，所以我就把它留在了。也许只是在那里解决选择问题从初始化？无论如何，我把这部分放在评论中。我总是这样选择：
$selected = $row["program"] == $program ? 'selected="selected"' : '';
可能是＃34;老派＆＃34;这样做的方式，但它总是对我有用。
无论如何，显然如果我们试图获取所选选项的值并且其值已被删除，那么它可能不会很好。更不用说没有办法知道＆＃34;当它刚刚像它那样硬编码时，删除具有相同值的选项是什么，所以你最终会得到一个重复的选项。
这应该可以解决大部分问题，但这一切都是在我脑海中完成的，所以希望这一切都能像我认为的那样成功。无论如何，这个理论是合理的。
您可以在此沙箱中测试它：
http://sandbox.onlinephpfunctions.com/code/077c8a988697122549713ede9c305bf4f7620ed9
使用（作为行的固定数据。）
$row = [
'id' => 1,
'program' => 'Hockey',
'plan' => 'Off Season'
];
哪个输出：
<div class="medium-auto small-12 cell" style="padding:2px;">
<select style="margin: 0; height: auto; border: 0;" name="program" id="program-1" >
<option value="Hockey" selected="selected">Hockey</option>
<option value="Fundamentals" >Fundamentals</option>
</select>
</div>
<div class="medium-auto small-12 cell" style="padding:2px;">
<select style="margin: 0; height: auto; border: 0;" name="plan" id="plan-1">
<option value="Off Season" selected="selected">Off Season</option>
<option value="Pre Season" >Pre Season</option>
<option value="In Season" >In Season</option>
</select>
</div>
正如您所看到的，我们有program-1和plan-1我们的ID，然后两个选项都包含selected="selected"的正确元素
处理以前没有为该程序选择数据的情况。
对于上面的第一个循环，我会添加此
//echo <select ...
echo '<option value="" > - Please select a program - </option>';
//foreach( ...
在循环之前和<select开放之后执行此操作。然后对于第二个循环，我将禁用第二个选择，直到他们在第一个选择中进行选择。
$disabled = empty($row["program"]) ? 'disabled="disabled"': '';
echo '<select style="margin: 0; height: auto; border: 0;" name="plan" id="plan-'.$row['id'].'" '.$disabled.'>';
然后在Javascript中
$('select[name="program"]').change(function(){
var program = $(this).val();
if(program == '' ) return; //exit on empty selection
var plan_id = $(this).prop('id').replace('program', 'plan');
//enable the select if disabled.
$('#'+plan_id).attr('disabled',false);
然后你可能只想在保存之前检查他们选择了一个程序等等。
对于任何Javascript问题，请始终使用浏览器中的调试窗口（f12），然后单击console。然后在您的代码中，您可以像
console.log(var);
它将在控制台中打印该值。这与PHP的var_export，print_r或var_dump等相似......
所以我会从这个
开始 <script>
var programsByplan = <?php echo json_encode($programsByplan); ?>;
console.log(programsByplan);
$('select[name="program"]').change(function(){
var program = $(this).val();
console.log(program);
var plan_id = $(this).prop('id').replace('program', 'plan');
console.log(programsByplan[program]);
if(programsByplan[program]){
var options = [];
$.each(programsByplan[program], function(i,v){
options.push('<option value="'+v+'">'+v+'</option>');
});
$('#'+plan_id).html(options.join("\n"));
}else{
//or, do somkind of error recovery here.
$('#'+plan_id).html('<option value="">No Plans</option>');
}
});
</script>
等等，看看价值是多少。这可能是最好的方式。
干杯。