javascript - 页面重新加载时使用 javascript 动态选择下拉菜单，并将更改另一个下拉菜单等

Question

我有这样的 table

菜单表

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" 中选择从 Menu 填充的选项，它将为 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"。

Answer 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，这将由您的应用程序决定。