Select that depends on another deal to do it from an example that I have

Question

Select that depends on another deal to do it from an example that I have

Navigation

#1 by (0 votes)

0

Hello good morning friend here I have a select option that I need to depend on another but I do not need help I try to make this example link

tds += '<select class="form-control"  id="choice1">';
tds += '<option value="C">ESTRUCTURAL</option>';
tds += '<option value="S">ESTRUCTURAL</option>';
tds += '<option value="O">ORGANIZATIVA</option>';
tds += ' <option value="AF"  >OTROS FACTORES</option>';
tds += '</select>';



                    tds += '<select class="txtFormulario_PreguntaCategoria" id="txtFormulario_PreguntaCategoria">';
                        tds += '<option data-option="C" disabled selected></option>';
                        tds += '<option data-option="C" title="" value="" disabled>CONDUCTAL</option>';
                        tds += '<option data-option="C" title=" Incumplimiento de normas procedimientos y metodos de trabajo"   value="C1">C1</option>';
                        tds += '<option data-option="C" title="Falta de uso, mal uso o uso incorrecto de los EPI" value="C2">C2</option>';
                        tds += '<option data-option="C" title="Uso indebido los equipos y dispositivos" value="C3">C3</option>';
                        tds += '<option data-option="C" title="Posicion inadecuada del cuerpo /postura"  value="C4">C4</option>';
                        tds += '<option data-option="C" title="Distraccion / Falta de atencion"  value="C5">C5</option>';
                        tds += '<option data-option="C" title="Falta de señalizacion de peligro"  value="C6">C6</option>';


                        tds += '<option data-option="S" title=""  value="" disabled>ESTRUCTURAL</option>';
                        tds += '<option data-option="S" title="Equipos/ Herramientas / Dispositivos defectuosos o inadecuadas."  value="S1">S1</option>';
                        tds += '<option data-option="S" title="Falta/Insuficiencia de los dispositivos de proteccion colectiva."  value="S2">S2</option>';
                        tds += '<option data-option="S" title=" Sistemas inadecuado de prevencion de explosiones o incendios."  value="S3">S3</option>';
                        tds += '<option data-option="S" title="Inadecuada contencion de productos quimicos."  value="S4">S4</option>';
                        tds += '<option data-option="S" title="Inadecuado sistema de señalizacion de peligros."  value="S5">S5</option>';
                        tds += '<option data-option="S" title="Condiciones inadecuadas del ambiente de trabajo."  value="S6">S6</option>';




                        tds += '<option data-option="O" title=""  value="" disabled>ORGANIZATIVA</option>';
                        tds += '<option data-option="O" title="Falta de procedimiento / procedimiento inadecuado."  value="01">01</option>';
                        tds += '<option data-option="O" title="Evaluacion de riesgos incompleta"  value="02">O2</option>';
                        tds += '<option data-option="O" title=" Inadecuada demarcacion de las areas"  value="03">O3</option>';
                        tds += '<option data-option="O" title="Inadecuado mantenimiento de los dispositivos y equipos o herramientas"  value="04">O4</option>';
                        tds += '<option data-option="O" title="Gestion adecuada de los EPI´S"  value="05">O5</option>';
                        tds += '<option data-option="O" title="Falta/Inadecuacion del sistema de control/Monitoreo"  value="06">O6</option>';
                        tds += '<option data-option="O" title="Utilizacion de mano de obra no cualificada."  value="07">O7</option>';
                        tds += '<option data-option="O" title="Falta de formacion/formacion insuficiente."  value="08">O8</option>';
                        tds += '<option data-option="O" title="Falta de coordinación entre actividades o de definicion de responsabilidades."  value="09">O9</option>';
                        tds += '<option data-option="O" title="Falta de orden / limpieza de lugares de trabajo."  value="10">10</option>';
                        tds += '<option data-option="O" title="Proceso de comunicación inadecuado."  value="11">11</option>';




                        tds += '<option data-option="AF"  title=""  value="" disabled   >OTROS FACTORES</option>';
                        tds += '<option data-option="AF"  title="Fenomenos naturales imprevistos"  value="AF1">AF1</option>';
                        tds += '<option data-option="AF"  title="Crimen/delincuencia"  value="AF2">AF2</option>';
                        tds += '<option data-option="AF"  title="Perdida de conocimiento/ Control sensorial"  value="AF3">AF3</option>';
                        tds += '<option data-option="AF"  title="Otros"  value="AF4">AF4</option>';

AND THIS IS MY JAVASCRIPT

function filter_options(){
    if (typeof $("#choice1").data('options') === "undefined") {
       $("#choice1").data('options', $('#txtFormulario_PreguntaCategoria_ option').clone());
  }
    var id = $("#choice1").val();
    var options = $("#choice1").data('options').filter('[data-option=' +val.idPre + ']');
    $('#txtFormulario_PreguntaCategoria_').html(options);
}

$(function () {
        //Ejecutar el filtro la primera vez
        filter_options();

    //actualizar al cambiar el factor
    $("#choice1").change(function () {
        filter_options();
        });

});

javascript html

asked by JSACTM Music 25.09.2018 в 22:26

source

1 answer

Index Firebase data Active applies to internal elements

score 0 · Accepted Answer

The problem is that since you are arming the main combo several times, the # choice1 generates a conflict because there is not only one can exist several, to solve them, invoke them for the class. choice1 for example. I made some changes in your code try it and let me know:

function filter_options(e){

  const padre = $(e.target).parent();
  if (typeof padre.find(".choice1").data('options') === "undefined") {
    padre.find(".choice1").data('options', padre.find('.combo2').clone());
  }

  var id = padre.find(".combo1").val();
  var options = padre.find(".combo1").data('options').filter('[data-option=' +val.idPre + ']');
  padre.find('.combo2').html(options);

}

$(function () {

  $(".combo1").change((e) => {
    filter_options(e);
  });

});

Since there are several .combo1 and for each of them there is a .combo2 then I pass to the filter_options function the element that is triggering the change event, then within the function I call a higher instance that I call father and then get the children dynamically according to the corresponding row and thus we do not mix the combos > .combo1 between them and you should call the combo2 corresponding to your row and not another.