类似这样:
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,但问题被标记了。
所以在更改任何带有名称的select时
program
(我们没有更改,所以它们都有相同的名称)我们触发事件回调。当然,你也可以在课堂上做这部分。
在回调中,我们获取当前select中选择的值,然后检查它是否存在于
programsByplan
(它总是应该这样做),但检查也无妨。
然后我们转换程序id
program-'.$row['id'].'
到
plan-'.$row['id'].'
.现在我们知道要更改的计划。我更喜欢使用数组来添加选项,但您可以
+=
事情现在我们知道了计划元素的id,用
.html()
。
我还没有测试过这个,但应该很接近。重要的是通过让id易于关联,或者换言之,易于找到正确的id,让自己成功
plan
更改的元素
程序
要素
我还假设你有
$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
我们在这里添加
$programsByplan
在PHP中,然后使用json\u encode,我们可以将相同的数组添加到Javascript中,这很了不起。希望这能奏效
var programsByplan = <?php echo json_encode($programsByplan); ?>;
有时可能需要一些修改,但它在代码的可维护性方面有巨大的好处。因为您只使用了一个权威的数据源。而不是到处传播。这样做的一个附带好处是,如果您将程序和计划制作为具有多对一关系的两个表,那么您可以将它们放在数据库中,并通过构建该数组轻松更新代码。看看数据是否只是硬编码的,那么以后很难做出这样的更改。
它还允许我们修复最初构建select时遇到的一些其他问题,并简化了代码。一个大问题是删除所选项目上的值,并且有重复的项目。
echo '<option value="" disabled selected>'.$row["program"].'</option>';
实际上,您正在删除此处的值,这可能不是您想要的。我也不确定
disabled
有点,所以我把它放在里面了。也许这只是为了解决初始化时的选择问题?不管怎样,我在评论中提到了这一部分。我总是这样选择:
$selected = $row["program"] == $program ? 'selected="selected"' : '';
这可能是“老派”的做法,但对我来说一直都很有效。
无论如何,很明显,如果我们试图获取所选选项的值,而其值已被删除,那么结果可能不会很好。更不用说,没有办法“知道”什么是删除具有相同值的选项,当它只是像以前一样硬编码时,因此您将得到一个重复的选项。
这应该可以解决大部分问题,但这一切都是在我的脑子里完成的,所以希望一切都能像我想的那样顺利。无论如何,这个理论是正确的。
您可以在此沙盒中进行测试:
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"
更新2
处理以前没有为程序选择数据的情况。
对于上面的第一个循环,我将添加以下内容
//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);
然后,您可能只想在保存之前检查他们是否选择了某个程序等。。
更新3
对于任何Javascript问题,请始终使用浏览器中的调试窗口(f12),然后单击
console
.然后在你的代码中,你可以
console.log(var);
它将在控制台中打印该值。它类似于PHP的var\u导出、print\u r或var\u转储等。。。
所以我从这个开始
<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>
等等,看看这些值是什么。这可能是最好的方法。
干杯
