How to make the PaiChild relation between two select elements?

Question

How to make the PaiChild relation between two select elements?

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I am making two elements Select an "Area" and another "Problem" and need to relate to each other, in the problem DB table is the FK spr_sar_code referring to the sar_code of the Area table. I am not able to interact so that the select problem depends on what is selected in the area. Here are the two methods of the Controller 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 are the corresponding divs and what I did in the 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 do not know how to create this relationship, I know that I need to use the onchange event of jquery but I had no idea how to do it, I'm still a beginner and it was very difficult.

php mysql html jquery ajax

asked by anonymous 19.09.2016 / 18:55

2 answers

2

Instead of making ajax requests for each time you change the select, create all of them at once, and change the available content 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>

Positive point

The client does not make requests to the server each time it changes the value in the select.
The content is already loaded, so it will be faster to just display the correct ones than to render them.
Even though the server is down, it still works, because everything is already loaded.

Negative point

If you have many options you can leave the first page loading very slow.

19.09.2016 / 19:27

Changing key in the Windows registry 10 WebDriver Error in Python3.5 AttributeError: can not set attribute

score 0 · Accepted Answer

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

The first change would be when loading 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;
}

Obs1: I'm just illustrating, the change will have to be done within the "Query" function of the "Problem" class

The second change would be just the "change" of the select 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.