Как с помощью Ajax подтянуть значения в select?

103

02 апреля 2022, 14:40

Есть массив:

array (size=5)
  1821175 => 
    array
      'id' => int 1821175
      'name' => string 'Name'
      'statuses' => 
        array
          28235989 => 
            array
              'id' => int 28235989
              'name' => string 'status 1'
              'color' => string '#c1c1c1'
          28235992 => 
            array
              'id' => int 28235992
              'name' => string 'status 2'
              'color' => string '#c1c1c1'
   1931089 => 
    array
      'id' => int 1931089
      'name' => string 'Name 2'
      'statuses' => 
        array
          28235989 => 
            array
              'id' => int 28235989
              'name' => string 'status 3'
              'color' => string '#c1c1c1'
          28235992 => 
            array
              'id' => int 28235992
              'name' => string 'status 4'
              'color' => string '#99ccff'

Я получаю значения для каждого Name со своим ID таким образом:

<select class="form-control" id="Pipelineselect" name="Pipelineselect">
    <?php
    foreach ($PipeLines as $PipeLine) {
      echo "<option value=".$PipeLine['id'].">".$PipeLine['name']."</option>";
      }
    ?>
</select>

Дальше необходимо вывести ещё один <select></select>, в options которого надо вставить соответствующие значения $PipeLine['statuses'] для каждого из $PipeLine: То есть, в итоге, результаты во второй селект бы подгружались ajax-ом это должно выглядеть как:

Помогите, как такое реализовать?

Answer 1

Можно и без ajax. Вы же берёте данные из этого же массива.

<?php
$PipeLines = array(
    1821175 => array(
        'id' => '1821175',
        'name' => 'Name',
        'statuses' => array(
            28235989 => array('id' => '28235989',
                'name' => 'status 1',
                'color' => '#c1c1c1'),
            28235992 => array('id' => '28235992',
                'name' => 'status 2',
                'color' => '#c1c1c1')
        )
    ),
    1931089 => array(
        'id' => '1931089',
        'name' => 'Name 2',
        'statuses' => array(
            28235989 => array(
                'id' => '28235989',
                'name' => 'status 3',
                'color' => '#c1c1c1'),
            28235992 => array(
                'id' => 28235992,
                'name' => 'status 4',
                'color' => '#99ccff'
            )
        )
    )
);
print_r($PipeLines);
?>
<select class="form-control" id="Pipelineselect" name="Pipelineselect">
    <?php
    $Keys = array();
    echo "<option value=''></option>";
    foreach ($PipeLines as $ke=>$PipeLine) {
        echo "<option value=".$PipeLine['id'].">".$PipeLine['name']."</option>";
    }
    ?>
</select>
<?php
foreach ($PipeLines as $key=>$PipeLine) {
    echo '<select class="form-control" id="'.$key.'" name="'.$key.'" hidden>';
    foreach ($PipeLine['statuses'] as $status)
    echo "<option value=".$status['id'].">".$status['name']."</option>";
    echo '</select>';
}
?>
<script language="JavaScript">
    let z = JSON.parse('<?php print_r(json_encode($PipeLines))?>');
    Object.keys(z).forEach(function (key){
        var Press = z[key]['id'];
        document.getElementById("Pipelineselect").addEventListener("change", function() {
            var e = document.getElementById("Pipelineselect");
            var strUser = e.options[e.selectedIndex].value;
            if (strUser == Press) {
                document.getElementById(Press).hidden = false;
            }else {
                document.getElementById(Press).hidden = true;
            }
        });
    });
</script>

Answer 2

Делаете ajax запрос на сервер и с сервера возвращаете готовый json объект. Затем в success вы ищете ваш select чтото типо $('#select-id') проходите циклом по полученному json и создаете option елементы для вашего селекта. Думаю что понятно изложил, в случае чего задавайте вопросы