Preview:
JS

$('#ceremonial').change(function () {
    var ceremonial_id = $(this).val();
    $('#responsible_ceremonial_name').empty().append('<option value=""></option>');
    $('#responsible_ceremonial_phone').val('');

    if (ceremonial_id) {
      $.ajax({
        url: BASE_URL + 'Ajax/getResponsibleCeremonialName',
        type: 'POST',
        data: { ceremonial_id: ceremonial_id },
        dataType: 'json',
        success: function (data) {
          $('#responsible_ceremonial_name').append('<option value="new">Novo</option>');
          $.each(data, function (index, responsible_ceremonial) {
            $('#responsible_ceremonial_name').append('<option value="' + responsible_ceremonial.id + '">' + responsible_ceremonial.name + '</option>');
          });


        },
        error: function (jqXHR, textStatus, errorThrown) {
          console.error('Erro ao buscar responsavel pelo cerimonial: ' + textStatus);
        }
      });
    }
  });


HTML - Primeiro Select normal preenchido pelo BD

<div id="select_ceremonial" class="col-lg-3 col-md-8">
                                            <!-- <label for="">Informações do Local do evento:</label> -->
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <!-- <label class="input-group-text" for="ceremonial">Local</label> -->
                                                </div>
                                                <select class="custom-select" id="ceremonial" name="ceremonial">
                                                    <option value="" selected></option>
                                                    <option value="0">Novo</option>
                                                    <?php foreach ($ceremonials as $ceremonial) : ?>
                                                        <?php if (isset($info_event)) : ?> <!-- verificando se o form é create ou edit -->
                                                            <option value="<?= $ceremonial['id'] ?>" <?= ($info_event['ceremonial_id'] == $ceremonial['id']) ? 'selected' : '' ?>><?= $ceremonial['name'] ?></option>
                                                        <?php else : ?>
                                                            <option value="<?= $ceremonial['id'] ?>"><?= $ceremonial['name'] ?></option>
                                                        <?php endif; ?> <!-- fim da verificação create edit -->
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>


O SELECT A SER PREENCHIDO
<div class="col-lg-2 col-md-6 responsible-ceremonial-name">
                                            <div class="input-group mb-3">
                                                <!-- select controlado por js -->
                                                <select class="custom-select" name="responsible_ceremonial_name" id="responsible_ceremonial_name">

                                                    <option value="" selected></option>

                                                </select>

                                                <!-- fim select controlado -->
                                            </div>
                                        </div>


AJAXCONTROLLER

public function getResponsibleCeremonialName()
    {

        $ResponsibleCeremonial = new ResponsibleCeremonial();
        $filters = array();
        $filters['ceremonial_id'] = filter_input(INPUT_POST, 'ceremonial_id');
        $responsibles = $ResponsibleCeremonial->getAll(200, 0, $filters);
        echo json_encode($responsibles);
    }
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter