5

Tenho um sistema que possui 3 selects, onde selecionando uma opção no 1º select é listado uma lista no 2º select e selecionando uma opção no 2º select, é listado os itens no 3º.

O problema ocorre entre o 2º e 3º, quando seleciono uma opção no 2º select ele lista as opções para o 3º e eu seleciono, quando vou para próxima linha e seleciono outra opção no 2º select ele altera a do 3º select que eu havia selecionado anteriormente.

selecionei a primeira opção do segundo select e foi listado os itens inserir a descrição da imagem aqui

vou para segunda linha e seleciono outra opção no 2º select e o 3º select é zerado na opção anterior. inserir a descrição da imagem aqui

-> model de relação entre o 2º o 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>

1 Resposta 1

3

Isso é porque você não está apontando para o select.tecidos da mesma linha.

Ao usar $('.tecidos').append(...) você está apontando para o primeiro elemento da página que possui a classe .tecidos (no caso, o select em questão).

É preciso apontar para o select.tecidos que está na mesma linha do select de onde foi chamada a função. Aí você vai ter que fazer algumas alterações:

Em vez de enviar this.value no onchange, envie apenas this (elemento que chama a função): onchange="carregaid(this.value);verificatecidosgrupos(this)" (provavelmente terá que fazer o mesmo na função carregaid()).

E na função você irá buscar o select.tecidos da mesma linha com .closest(".form-group").find(".tecidos"), alterando o argumento da função, a forma de pegar o id do elemento e as formas de remover as options e fazer o .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 + "'");
    });
}

O que notei também é que você está repetindo o mesmo id dos selects em cada linha. Um id deve ser único na página, embora possa funcionar no seu caso, pois me parece que você usa o id como identificador no controller.

Em vez de usar id, você pode pegar o name, que possui o mesmo valor.

Então você pegaria esse valor na função, em vez de:

var empresatecidoid = empresatecido.id;

Usaria:

var empresatecidoid = empresatecido.name;
3
  • Vou fazer as alterações e testes no código e retorno a informação se consegui ou não. Commented 25/02/2019 às 19:32
  • Funcionou perfeitamente. Commented 1/03/2019 às 17:17
  • Legal jovem! :D
    – Sam
    Commented 1/03/2019 às 17:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .