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); }
Preview:
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