重新加载页面时使用javascript动态选择下拉列表，并将更改另一个下拉列表，依此类推 [英] Selected drop down dynamically using javascript when page reload and will change another dropdown and so on
问题描述
我有这样的桌子
菜单表
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 |
在其他表格中，我将表格合并为彼此具有关联性
in other table i combine the table to have relation each other
组合表
| idmenu | idsubmenu | idsubsubmenu |
| 1 | 1 | 1 |
我有这样的组合框.每个选择选项都会根据先前选择的选项触发该选项
I have combo box like this. each of the select option will trigger the option based the previous selected option
Ex:如果我在 id ="penugasan" 中选择从 Menu 填充的选项，它将为 id ="jenis_penugasan" <<填充新选项/strong>基于表子菜单"表，并且在填充选项之后，您将在 id ="jenis_penugasan" 中选择其他选项，之后将为基于id ="sub_jenis_penugasan" 的表 Sub Sub Menu Table (子菜单菜单表).
Ex :if i select the option in id="penugasan" that populate from Menu, it will populate new option for id="jenis_penugasan" based table Sub Menu table and after the option populate, you will chose other option inside id="jenis_penugasan" after that it will populate new option for id="sub_jenis_penugasan" based table Sub Sub Menu Table.
<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" .
how do i make if the page refresh it will automatically populate 2 other select option id="jenis_penugasan" and id="sub_jenis_penugasan" based Combine Table, i have use ajax but it give me a delay so its didn't populate the id="sub_jenis_penugasan".
推荐答案
好，很抱歉，花了很长时间，但是我想举一个例子.仅供参考，我在CodePen上有一个工作示例: https://codepen.io/skunkbad/pen/mMqxRW
Ok, sorry it took so long, but I wanted to work up an example. FYI I've got a working example on CodePen: https://codepen.io/skunkbad/pen/mMqxRW
那么，为什么不使用AJAX并尝试通过速度很慢的HTTP请求提取所有数据，为什么不只在加载页面时引入所有数据呢?
So, instead of using AJAX and trying to pull in all the data via HTTP requests which are slow, why not just bring in all the data when you load the page?
我的例子是狗，猫，鸟，它们的单独种类以及它们的名称.在PHP中，我将所有这些都放入了数组:
My example is dogs, cats, birds, their separate kinds, and names for them. In PHP, I have put these all into arrays:
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:
You end up putting this json encoded data into hidden inputs in your HTML. You end up with HTML like this:
<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，您可以在选择时自动填充下拉列表:
Then, with what is actually some pretty simple javascript, you can autopopulate the dropdowns as you make your selections:
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更快.希望对您有帮助.
I do this in my own websites, because it is way faster than using AJAX. Hope it helps you.
现在，如果您希望能够自动选择页面加载时的下拉菜单，我将javascript更改为此:
Now if you want to be able to auto select the dropdowns on page load, I change the javascript to this:
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);
}
}
}
在加载页面时，您可以通过隐藏的输入来应用值，它们将以所需的方式设置下拉菜单:
And while you are loading up the page, you apply the values through hidden inputs, they will set up the dropdowns the way you want them:
<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，则由您的应用程序确定.
In PHP you just need to assign the values of $value1, $value2, and $value3 from wherever they are coming. So if it's $_GET, $_POST, $_COOKIE, or $_SESSION, that will be determined by your application.
这篇关于重新加载页面时使用javascript动态选择下拉列表，并将更改另一个下拉列表，依此类推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
