在页面重新加载时使用javascript动态选择下拉，并将更改另一个下拉列表，依此类推

我有这样的表

菜单表

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 | 

我有这样的combobox。 每个选择选项将根据先前选择的选项触发选项

例如：如果我选择从菜单填充的id =“penugasan”中的选项，它将填充基于表子菜单表的 id =“jenis_penugasan”的新选项，并且在填充选项后，您将在id =“jenis_penugasan”中选择其他选项“之后它将填充基于id =”sub_jenis_penugasan“的子表子子菜单表的新选项。

    <option value="id ?>">nama_penugasan; ?>     

菜单表中的菜单数组对象

 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” 。

Answer 1

对不起，花了这么长时间，但我想做一个例子。 仅供参考我在CodePen上有一个有效的例子： https ：//codepen.io/skunkbad/pen/mMqxRW

因此，不是使用AJAX并尝试通过缓慢的HTTP请求提取所有数据，为什么不在加载页面时引入所有数据？

我的例子是狗，猫，鸟，它们各自的种类，以及它们的名称。 在PHP中，我将这些全部放入数组中：

 echo json_encode([ 'a' => 'Dogs', 'b' => 'Cats', 'c' => 'Birds' ]); echo '
'; echo '
'; 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 '
'; echo '
'; 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：

然后，通过实际上一些非常简单的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('' + v + ''); }); $('#select1').on('change', function(){ $('#select2 option').remove(); $('#select3 option').remove(); var selected = $('#select1 option:selected').val(); if( selected != '' ){ $('#select2').append(''); $.each(level2[selected], function(k,v){ $('#select2').append('' + v + ''); }); } }); $('#select2').on('change', function(){ $('#select3 option').remove(); var selected = $('#select2 option:selected').val(); if( selected != '' ){ $('#select3').append(''); $.each(level3[selected], function(k,v){ $('#select3').append('' + v + ''); }); } }); 

我在自己的网站上这样做，因为它比使用AJAX更快。 希望它能帮到你。

现在，如果您希望能够在页面加载时自动选择下拉列表，我将javascript更改为：

 var funcs = { selectFirst: function( selected ){ $('#select2 option').remove(); $('#select3 option').remove(); if( selected != '' ){ $('#select2').append(''); $.each(level2[selected], function(k,v){ $('#select2').append('' + v + ''); }); } }, selectSecond: function( selected ){ $('#select3 option').remove(); if( selected != '' ){ $('#select3').append(''); $.each(level3[selected], function(k,v){ $('#select3').append('' + v + ''); }); } } }; 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('' + v + ''); }); $('#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); } } } 

在您加载页面时，通过隐藏输入应用值，他们将按您希望的方式设置下拉列表：

在PHP中，您只需要分配$ value1，$ value2和$ value3的值，无论它们来自何处。 因此，如果它是$ _GET，$ _POST，$ _COOKIE或$ _SESSION，那将由您的应用程序决定。