1

No JavaScript tenho o seguinte trecho do código:

var html = `
    <div class="row">
        <div class="col-sm-3">
            <div class="fields">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="spnChannel">Canal ${quantity + 1}</span>
                    </div>
                   <select id="cmbType" class="form-control form-control-sm custom-select" onchange="changeFields(this);" >
                        <option value="">Tipo</option>
                        <option value="1">Semáforo</option>
                        <option value="2">Outros</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-sm-2" id="selectColor" hidden="hidden">
            <div class="fields">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                    </div>
                    <select id="cmbDetail" class="form-control form-control-sm custom-select">
                        <option value="">Cores</option>
                        <option value="verde">Verde</option>
                        <option value="amarelo">Amarelo</option>
                        <option value="vermelho">Vermelho</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-sm-2" id="selectFX" hidden="hidden">
            <div class="fields">
                <div class="input-group input-group-sm mb-3" id="bond">
                   <select id="cmbBond" class="form-control form-control-sm custom-select">
                        <option value="">Vínculo</option>
                        <option value="1">Faixa 1</option>
                        <option value="2">Faixa 2</option>
                        <option value="3">Faixa 3</option>
                        <option value="4">Faixa 4</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="col-sm-2" id="selectBoolean" hidden="hidden">
            <div class="fields">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                    </div>
                    <select id="cmbDetail" class="form-control form-control-sm custom-select">
                        <option value="">Selecione</option>
                        <option value="true">Verdadeiro</option>
                        <option value="false">Falso</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-sm-2" id="selectVinculo" hidden="hidden">
            <div class="fields">
                <div class="input-group input-group-sm mb-3" id="bond">
                   <select id="cmbBond" class="form-control form-control-sm custom-select">
                        <option value="">Vinculo</option>
                        <option value="porta">Porta</option>
                        <option value="redeElétrica">Rede elétrica</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
`;

$("#channels").append(html)

Toda vez que clico em adicionar, ele e executado, adicionando uma nova row. apenas o primeiro campo aparece de inicio. os outros vao aparecer de acordo com o que o usuário selecionar. Faço isso com a seguinte função:

function changeFields(div) {
    var html = ''
    if (div.value == 1) {
        $("#selectBoolean").attr("hidden", true);
        $("#selectVinculo").attr("hidden", true);
        $("#selectColor").attr("hidden", false);
        $("#selectFX").attr("hidden", false);
return;

    } else if (div.value == 2) {
        $("#selectBoolean").attr("hidden", false);
        $("#selectVinculo").attr("hidden", false);
        $("#selectColor").attr("hidden", true);
        $("#selectFX").attr("hidden", true);
return;
    }

}

Quando adiciono apenas um, ele funciona perfeitamento. Mas e se vou adicionar outra row e mudo o campo nela, o hidden é removido/adicionado do primeiro que foi adicionado. Como fazer para cada vez que eu adicionar uma row, os campos de cada um que ele adicionar sejam independentes do que foi adicionando anteriormente?

Minha pergunta é diferente da outra pois o que eu quero é adicionar uma nova row quando clicado em adicionar. Depois, dependendo do que o usuario selecionar no primeiro campo, quero esconder ou mostrar outros dois campos

2
  • Possível duplicata de Div dinamica + php 6/06/2019 às 11:44
  • não, não é bem aquilo que eu quero... só quero que adicione uma nova row quando o usuario clicar em adicionar.
    – dani
    6/06/2019 às 11:48

1 Resposta 1

0

Ao que me parece você está adicionando divs com o mesmo ids, e quando você executa seu método para changeFields ele altera apenas os ids que estão #selectBoolean, #selectVinculo, #selectColor, #selectFX.

Você pode alterar os campos que estão na div que é passada por parametro através da seleção de atributos ou classes por exemplo.

function changeFields(idDiv) {
    var html = ''
    if ($(idDiv).value == 1) {
        $(idDiv + "  > div[class='selectBoolean]").attr("hidden", true);
        $(idDiv + "  > div[class='selectVinculo']").attr("hidden", true);
        $(idDiv + "  > div[class='selectColor']").attr("hidden", false);
        $(idDiv + "  > div[class='selectFX']").attr("hidden", false);
        return;
    } else if (div.value == 2) {
        $(idDiv + "  > div[class='selectBoolean']").attr("hidden", false);
        $(idDiv + "  > div[class='selectVinculo']").attr("hidden", false);
        $(idDiv + "  > div[class='selectColor']").attr("hidden", true);
        $(idDiv + "  > div[class='selectFX']").attr("hidden", true);
        return;
    }

}

2
  • Meu problema é esse mesmo, mas essa solução não funciona. O que estou mandando para a função é o select e não a div que estou colocando coisa dentro. Como faço para mandar a div em si e o select tambem?
    – dani
    6/06/2019 às 12:05
  • Então você deve criar uma div que contenha as duas estruturas, crie uma div com uma classe row e coloque elas dentro, em vez de ID crie um atributo no html como customId = "selectBoolean", depois basta selecionar a div row e modificar os componentes internos através dos atributos como $(idDiv + " > div[customId='selectBoolean]' ").attr("hidden", true); 6/06/2019 às 12:50

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 .