How to make the parent relation between two select elements?

Question

I am making two elements Select a "Area" and another "Problem" and I need to relate to each other, in the BD table of the problem FK spr_sar_codigo referring to sar_codigo of the table Area. I am unable to interact so that the select problem depends on what is selected in the area. Here are the two Controller methods to load the two selects:

public function ajaxcarregaarea() {

    $obj_area = new daoArea();
    $areas = $obj_area - > Consultar();
    $select = "<select id='area' name='area' data-obrigatorio='S' class='valido'>";
    $select. = "<option value='' selected='selected'>Selecione a área responsável</option>";
    foreach($areas as $area) {
        $select. = "<option value='".$area['sar_codigo'].
        "'>".$area['sar_titulo'].
        "</option>";
    }
    $select. = "</select>";

    echo $select;
}


public function ajaxcarregaproblema() {

    $obj_problema = new daoProblema();
    $problemas = $obj_problema - > Consultar();
    $select = "<select>";
    $select. = "<option value='' selected='selected'>Selecione a área responsável</option>";
    foreach($problemas as $problema) {
        $select. = "<option value='".$problema['spr_sar_codigo'].
        "'>".$problema['spr_problema'].
        "</option>";
    }
    $select. = "</select>";

    echo $select;
}

And here’s the corresponding Divs and what I did in Script in the file where the Divs are:

<div class="row">
    <div class="col-xs-4 col-xs-offset-1 cfd">
        <?=$i->getFormularioIdioma("Área Responsável")?>:
    </div>
    <div id="areas" class="col-xs-6 cfb so-awesome1">
    </div>
</div>

<div class="row">
    <div class="col-xs-4 col-xs-offset-1 cfd">
        <?=$i->getFormularioIdioma("Qual o Problema")?>:
    </div>
    <div id="problemas" class="col-xs-6 cfb so-awesome2">
    </div>
</div>

$(document).ready(function() {
    $.post("<?=$url?>insuporte/abrirchamado/ajaxcarregaarea", {}, function(ajaxcarregaarea) {
        $('#areas').html(ajaxcarregaarea);
    });
});

I don’t know how to create this relationship, I know I need to use the jquery onchange event but I had no idea how to do, I’m still beginner and esytou with many difficulties.

Answer 1

Instead of making ajax requests for each time you change the select, create all of them at once, and change the content available through a function.

  function changeChildren(value){
    var select = document.getElementById("childrens");
    select.value = '';  // REMOVE O VALOR ATUAL NO SELECT
    var options = select.getElementsByTagName('option');
    for(var i in options){
      var option = options[i];
      if(typeof option == 'object'){
        if(option.getAttribute('data-father') == value){
          option.style.display = 'block';
        }else{
          option.style.display = 'none';
        }
      }
    }
  }

<select id="father" onchange="changeChildren(this.value)">
  <option value=""></option>
  <option value="1">Father 1</option>
  <option value="2">Father 2</option>
</select>

<select id="childrens">
  <option value="1" data-father="1" style="display:none;">Children 1-1</option>
  <option value="1" data-father="1" style="display:none;">Children 2-1</option>
  <option value="1" data-father="1" style="display:none;">Children 3-1</option>
  <option value="1" data-father="2" style="display:none;">Children 1-2</option>
  <option value="1" data-father="2" style="display:none;">Children 2-2</option>
</select>

Plus

• Client does not make requests to served each time it changes the value in select.
• The content is already loaded so it will be faster just to display the correct ones than to render them.
• Even if the served falls, it still works, because it is already loaded.

Downside

• If it is many options you can slow down the first page loading.

Answer 2

As the problems depend directly on the area, when loading them you will have to specify which area you selected.

The first change would be to load the problems:

public function ajaxcarregaproblema($sar_codigo) {

    $obj_problema = new daoProblema();
    $problemas = $obj_problema - > Consultar($sar_codigo);
    $select = "<select id='slProblema'>";
    $select. = "<option value='' selected='selected'>Selecione a área responsável</option>";
    foreach($problemas as $problema) {
        $select. = "<option value='".$problema['spr_sar_codigo'].
        "'>".$problema['spr_problema'].
        "</option>";
    }
    $select. = "</select>";

    echo $select;
}

Note 1: I am just illustrating, the change will have to be made within the "Query" function of the "daoProblema" class"

The second amendment would be precisely the "change" of the select of areas:

$(document).ready(function() {
    $.post("<?=$url?>insuporte/abrirchamado/ajaxcarregaarea", {}, function(ajaxcarregaarea) {
        $('#areas').html(ajaxcarregaarea);

        $('#slProblema').change(function(i, e){

            $.post("<?=$url?>insuporte/abrirchamado/ajaxcarregaproblema", {'sar_codigo': $(this).val()}, function(ajaxcarregaproblema) {
                $('#problemas').html(ajaxcarregaproblema);
            });
        });

    });
});

I hope I have helped, if not totally, at least with some indication of the way. Good luck.