У меня такой стол
Таблица меню
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» и после заполнения опции вы выберете другую опцию внутри 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" .
Хорошо, жаль, что это заняло так много времени, но я хотел придумать пример. FYI У меня есть рабочий пример в 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>-<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>-<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, это будет определено вашим приложением.