Relation between selects

Question

I have a system that has 3 selects, where selecting an option in the 1st select is listed a list in the 2nd select and selecting an option in the 2nd select, is listed the items in the 3rd.

The problem occurs between the 2nd and 3rd, when I select an option in the 2nd select it lists the options for the 3rd and I select, when I go to the next row and select another option in the 2nd select it changes the 3rd select that I had previously selected.

I selected the first option of the second select and listed the items

I go to the second line and select another option in the 2nd select and the 3rd select is reset in the previous option.

-> relationship model between 2º and 3º select

function carregatecidoss($grupoT) {
    //$this->db->start_cache(); 
    //$this->db->trans_strict(TRUE);
    $this->db->select('idtec, nometec, grupotecido, empresatecidoid');
    $this->db->from('tecidos');
    $this->db->where('grupotecido', $grupoT);
    $this->db->order_by ('nometec' ,  'ASC' );
    //$this->db->limit(1);
    $query = $this->db->get();
    if ($query) {
        return $query->result();
    } else {
        return false;
    }
}

-> controller

function verificatecidosgrupos() {
    if ($this->session->userdata('logged_in')) { // valida usuário logado
        $session_data = $this->session->userdata('logged_in');
        $usuarioid = $session_data['UsuarioId'];

        $option = '';

        if ($this->input->post('grupoT')) {
            $grupoT = $this->input->post('grupoT');
            var_dump($grupoT);
            $this->load->model('model_geral');
            $tecidos = $this->model_geral->carregatecidoss($grupoT);
            if ((isset($tecidos)) && (!empty($tecidos))) {
                foreach ($tecidos as $grupo) {
                    $option .= '<option value="' . $grupo->idtec . '">' . $grupo->nometec . '</option>';
                }
                echo $option;
            } else {
                $option = '<option>Grupo tecidos não encontrado!</option>';
                echo $option;
            }
        } else {
            $option = '<option>Grupo tecidos não encontrado! Contate o administrador!</option>';
            echo $option;
        }
    } else {
        $option = '<option>SESSÃO EXPIRADA</option>';
        echo $option;
    }
}

->jquery

function verificatecidosgrupos(empresatecidoid) {
                                       //debugger;
                                        var url = base_url + "home/verificatecidosgrupos";
                                        $.post(url, {grupoT: empresatecidoid},
                                            function (session_gemp) {
                                                //alert(session_gemp);
                                                $('.tecidos option').remove();
                                                $('.tecidos').append("'<option>--Selecione o Tecido--</option>'");
                                                $('.tecidos').append("'" + session_gemp + "'");
                                        });
                                    }

-> html

<td>
<div class="form-group">
    <div class="col-sm-9">
        <select class="form-control gtecidos" id="gtecidos" name="gtecidos" onchange="carregaid(this.value);verificatecidosgrupos(this.value)" style="width: 70px">

        </select>
    </div>
</div>

->html

<td>
<div class="form-group">
    <div class="col-sm-9">
        <select class="form-control tecidos" id="tecidos" name="tecidos" onchange="carregaid(this.value);" style="width: 70px">
        </select>
    </div>
</div>

Answer 1

That’s why you’re not pointing to the select.tecidos of the same line.

When using $('.tecidos').append(...) you are pointing to the first element of the page that has the class .tecidos (in the case, the select in question).

It is necessary to point to the select.tecidos which is on the same line as the select from which the function was called. There you will have to make some changes:

Instead of sending this.value in the onchange, send only this (element calling the function): onchange="carregaid(this.value);verificatecidosgrupos(this)" (probably have to do the same in function carregaid()).

And in the role you will fetch the select.tecidos of the same line with .closest(".form-group").find(".tecidos"), changing the function argument, the way to take the id of the element and ways to remove options and do the .append():

function verificatecidosgrupos(empresatecido) {
   //debugger;
   var empresatecidoid = empresatecido.id; // id do select que chamou a função
   // pega a div da linha e busca por .tecidos
   var tecidos = $(empresatecido).closest(".form-group").find(".tecidos");
    var url = base_url + "home/verificatecidosgrupos";
    $.post(url, {grupoT: empresatecidoid},
        function (session_gemp) {
            //alert(session_gemp);
            // remove as options
            $('option', tecidos).remove();
            tecidos.append("'<option>--Selecione o Tecido--</option>'");
            tecidos.append("'" + session_gemp + "'");
    });
}

What I also noticed is that you’re repeating the same id of the selects in each row. One id should be unique on the page, although can work in your case because it seems to me that you use the id as identifier in the controller.

Instead of using id, you can take the name, which has the same value.

Then you would take that value in function instead of:

var empresatecidoid = empresatecido.id;

Would use:

var empresatecidoid = empresatecido.name;