我有这样的表
菜单表
Id | menu |
1 | lol |
2 | lol2 |
子菜单表
id | id_menu | sub_menu |
1 | 1 | sublol1 |
2 | 1 | sublol12 |
3 | 2 | sublol13 |
子子菜单表
id | id_sub_menu | sub_sub_menu |
1 | 1 | subsublol |
2 | 2 | subsublol2 |
在其他表格中我将表格相互关联
合并表格
| idmenu | idsubmenu | idsubsubmenu |
| 1 | 1 | 1 |
我有这样的组合框。每个选择选项将根据先前选择的选项
触发选项例如：如果我选择从菜单填充的 id =“penugasan”中的选项，它将填充 id =“jenis_penugasan”<的新选项/ strong>基于表子菜单表，在填充选项后，您将在 id =“jenis_penugasan”中选择其他选项，之后它将为填充新选项id =“sub_jenis_penugasan”基于表子子菜单表。
<select id="penugasan" name="penugasan" placeholder="">
<?php foreach ($menu as $menu) { ?>
<option value="<?php echo $penugasan->id ?>"><?php echo $penugasan->nama_penugasan; ?></option>
<?php } ?>
</select>
<select id="jenis_penugasan" name="jenis_penugasan" ></select>
<select id="sub_jenis_penugasan" name="sub_jenis_penugasan"></select>
菜单表格中的菜单数组对象
Array
(
[menu] => Array
(
[0] => stdClass Object
(
[id] => 1
[menu] => lol
)
[1] => stdClass Object
(
[id] => 2
[menu] => lol2
)
)
）
如果页面刷新它将如何自动填充2其他选择选项 id =“jenis_penugasan”和 id =“sub_jenis_penugasan”基于组合表，我使用了ajax，但它给了我一个延迟，所以它没有填充 id =“sub_jenis_penugasan”。
答案 0 :(得分：1)
好的，抱歉花了这么长时间，但我想举一个例子。仅供参考我在CodePen上有一个有效的例子：https://codepen.io/skunkbad/pen/mMqxRW
因此，不是使用AJAX并尝试通过缓慢的HTTP请求提取所有数据，为什么不在加载页面时引入所有数据？
我的例子是狗，猫，鸟，它们各自的种类，以及它们的名称。在PHP中，我将这些全部放入数组：
echo json_encode([
'a' => 'Dogs',
'b' => 'Cats',
'c' => 'Birds'
]);
echo '<br />';
echo '<br />';
echo json_encode([
'a' => [
'aa' => 'Poodle',
'ab' => 'Pit Bull',
'ac' => 'Terrier'
],
'b' => [
'ba' => 'Maine Coon',
'bb' => 'Cheshire',
'bc' => 'Calico'
],
'c' => [
'ca' => 'Eagle',
'cb' => 'Hawk',
'cc' => 'Crow'
]
]);
echo '<br />';
echo '<br />';
echo json_encode([
'aa' => [
'aaa' => 'Fluffy',
'aab' => 'Fido',
'aac' => 'Bert'
],
'ab' => [
'aba' => 'Doug',
'abb' => 'Cindy',
'abc' => 'Randy'
],
'ac' => [
'aca' => 'Ted',
'acb' => 'Fred',
'acc' => 'Leonard'
],
'ba' => [
'baa' => 'Jasmine',
'bab' => 'Kendall',
'bac' => 'Rose'
],
'bb' => [
'bba' => 'Toby',
'bbb' => 'Rebecca',
'bbc' => 'Daniel'
],
'bc' => [
'bca' => 'Felicity',
'bcb' => 'Eileen',
'bcc' => 'James'
],
'ca' => [
'caa' => 'Mark',
'cab' => 'Jennifer',
'cac' => 'George'
],
'cb' => [
'cba' => 'Jaydon',
'cbb' => 'Kayla',
'cbc' => 'Karen'
],
'cc' => [
'cca' => 'Jamie',
'ccb' => 'Della',
'ccc' => 'Mickey'
]
]);
您最终将此json编码数据放入HTML中的隐藏输入中。你最终得到这样的HTML：
<input id="level1" type="hidden" value='{"a":"Dogs","b":"Cats","c":"Birds"}' />
<input id="level2" type="hidden" value='{"a":{"aa":"Poodle","ab":"Pit Bull","ac":"Terrier"},"b":{"ba":"Maine Coon","bb":"Cheshire","bc":"Calico"},"c":{"ca":"Eagle","cb":"Hawk","cc":"Crow"}}' />
<input id="level3" type="hidden" value='{"aa":{"aaa":"Fluffy","aab":"Fido","aac":"Bert"},"ab":{"aba":"Doug","abb":"Cindy","abc":"Randy"},"ac":{"aca":"Ted","acb":"Fred","acc":"Leonard"},"ba":{"baa":"Jasmine","bab":"Kendall","bac":"Rose"},"bb":{"bba":"Toby","bbb":"Rebecca","bbc":"Daniel"},"bc":{"bca":"Felicity","bcb":"Eileen","bcc":"James"},"ca":{"caa":"Mark","cab":"Jennifer","cac":"George"},"cb":{"cba":"Jaydon","cbb":"Kayla","cbc":"Karen"},"cc":{"cca":"Jamie","ccb":"Della","ccc":"Mickey"}}' />
<select id="select1">
<option value=""></option>
</select>
<select id="select2"></select>
<select id="select3"></select>
然后，通过实际上一些非常简单的javascript，您可以在进行选择时自动填充下拉列表：
var level1 = JSON.parse( $('#level1').val() );
var level2 = JSON.parse( $('#level2').val() );
var level3 = JSON.parse( $('#level3').val() );
$.each(level1, function(k,v){
$('#select1').append('<option value="' + k + '">' + v + '</option>');
});
$('#select1').on('change', function(){
$('#select2 option').remove();
$('#select3 option').remove();
var selected = $('#select1 option:selected').val();
if( selected != '' ){
$('#select2').append('<option value=""></option>');
$.each(level2[selected], function(k,v){
$('#select2').append('<option value="' + k + '">' + v + '</option>');
});
}
});
$('#select2').on('change', function(){
$('#select3 option').remove();
var selected = $('#select2 option:selected').val();
if( selected != '' ){
$('#select3').append('<option value=""></option>');
$.each(level3[selected], function(k,v){
$('#select3').append('<option value="' + k + '">' + v + '</option>');
});
}
});
我在自己的网站上这样做，因为它比使用AJAX更快。希望它可以帮到你。
现在，如果您希望能够在页面加载时自动选择下拉列表，我将javascript更改为：
var funcs = {
selectFirst: function( selected ){
$('#select2 option').remove();
$('#select3 option').remove();
if( selected != '' ){
$('#select2').append('<option value=""></option>');
$.each(level2[selected], function(k,v){
$('#select2').append('<option value="' + k + '">' + v + '</option>');
});
}
},
selectSecond: function( selected ){
$('#select3 option').remove();
if( selected != '' ){
$('#select3').append('<option value=""></option>');
$.each(level3[selected], function(k,v){
$('#select3').append('<option value="' + k + '">' + v + '</option>');
});
}
}
};
var level1 = JSON.parse( $('#level1').val() );
var level2 = JSON.parse( $('#level2').val() );
var level3 = JSON.parse( $('#level3').val() );
$.each(level1, function(k,v){
$('#select1').append('<option value="' + k + '">' + v + '</option>');
});
$('#select1').on('change', function(){
var selected = $('#select1 option:selected').val();
funcs.selectFirst( selected );
});
$('#select2').on('change', function(){
var selected = $('#select2 option:selected').val();
funcs.selectSecond( selected );
});
// On page load
var initial1 = $('#initial1').val();
var initial2 = $('#initial2').val();
var initial3 = $('#initial3').val();
if( initial1.trim() != '' ){
funcs.selectFirst( initial1 );
$('#select1 option[value="' + initial1 + '"]').prop('selected', true);
if( initial2.trim() != '' ){
funcs.selectSecond( initial2 );
$('#select2 option[value="' + initial2 + '"]').prop('selected', true);
if( initial3.trim() != '' ){
$('#select3 option[value="' + initial3 + '"]').prop('selected', true);
}
}
}
在您加载页面时，您通过隐藏输入应用值，他们将按您希望的方式设置下拉列表：
<input type="hidden" id="initial1" type="hidden" value="<?php echo $value1; ?>" />
<input type="hidden" id="initial2" type="hidden" value="<?php echo $value2; ?>" />
<input type="hidden" id="initial2" type="hidden" value="<?php echo $value3; ?>" />
在PHP中，您只需要分配$ value1，$ value2和$ value3的值即可。因此，如果它是$ _GET，$ _POST，$ _COOKIE或$ _SESSION，将由您的申请决定。