1

Tengo una pregunta con un combobox que tienen 2 opciones, ejemplo

CONDICIÓN DEL estudiante con 2 opciones como respuesta

1.EGRESADO
2. NO EGRESADO

  <select name="pregunta[0].ope_id" id="pregunta[0].ope_id" class="form-control selectinput valid">  
            <option value="44" data_arreglo="33,34,35">EGRESADO</option>  
            <option value="45" data_arreglo="32">NO EGRESADO</option>  

En el campo data_arreglo guardo los id de las preguntas que dependen de la respuesta que elijo y que quiero ocultar. Acá esta una de las preguntas que quiero ocultar.

<input type="hidden" name="pregunta[2].pre_id" id="pregunta[2].pre_id" value="33" data_padre="31">  

quiero utilizar una función que obtenga el evento y oculte las preguntas. Gracias de antemano.

Actualmente solo he logrado esto, pero no sirve a mi propósito

var preguntas = document.querySelectorAll('[data-trigger]');
preguntas = [].slice.apply(preguntas);
preguntas.forEach(function(item, i){
	var _trigger = item.attributes['data-trigger'].nodeValue;
  if(_trigger === "true"){
  	document.getElementById(item.attributes['id'].nodeValue).addEventListener("change", Disparar);
  }

});

function Disparar(e){
  console.log(e.target.type);
	var id = e.target.attributes['id'].nodeValue;
  switch(e.target.type){
  	case 'select-one' : ss_selectOne(id); break;
    default: break;
  }

}

function ss_selectOne(id){
  var hijos = document.querySelectorAll('[data-padre]');
  hijos = [].slice.apply(hijos);
  hijos = hijos.filter(function(item){
  	return item.attributes['data-padre'].nodeValue === id;
  });
  hijos.forEach(function(item, i){
  	document.getElementById(item.attributes['id'].nodeValue).removeAttribute("disabled");
  });
  var element = document.getElementById(id);
  var arreglo = element.options[element.selectedIndex].attributes['data-arreglo'].nodeValue.split(',');
  arreglo.forEach(function(item, i){
    if(item !== ""){
    	document.getElementById(item).setAttribute("disabled","disabled");
    }    
  });  

  
}
 <select id="31" data-trigger="true">
 <option value="" data-arreglo="">Seleccione</option>
  <option value="1" data-arreglo="33">Egresado</option>
  <option value="2" data-arreglo="32">No Egresado</option>
</select>

<select id="33" data-trigger="false" data-padre="31">
 <option value="" data-arreglo="">Fecha de Egreso</option>
  <option value="1">Fecha de Egreso</option>
</select>
<select id="32" data-trigger="false" data-padre="31">
 <option value="" data-arreglo="">Seleccione</option>
  <option value="1">Motivo por el cual no ingreso</option>
</select>
<br>

2
  • Disculpa ¿Usas Jquery o JavaScript puro?. Commented el 30 mar. 2017 a las 21:30
  • Hola Gabriel, estaba haciendolo con javascript puro. Commented el 30 mar. 2017 a las 21:34

4 respuestas 4

1

Recomiendo hacerlo con jquery y clases. Asi podria quedar el código:

<select name="pregunta[0].ope_id" id="pregunta[0].ope_id" class="form-control selectinput valid" onchange="cambia_visibles()>  
    <option value="44" data_class="egresado">EGRESADO</option>  
    <option value="45" data_class="no_egresado">NO EGRESADO</option>
</select>

Los inputs:

<input type="text" name="pregunta[2].pre_id" id="pregunta[2].pre_id" value="33" data_padre="31" class="mostrar egresado">  
<input type="text" name="pregunta[2].pre_id" id="pregunta[2].pre_id" value="34" data_padre="31" class="mostrar egresado">  
<input type="text" name="pregunta[2].pre_id" id="pregunta[2].pre_id" value="35" data_padre="31" class="mostrar egresado">  
<input type="text" name="pregunta[2].pre_id" id="pregunta[2].pre_id" value="36" data_padre="31" class="mostrar no_egresado">  

y la funcion que los oculta:

function cambia_visibles() {
    valor = $("#pregunta[0].ope_id")..attr("data_class");
    $(".mostrar").show();
    $("."+valor).hide();
}
1
  • Gracias Alfredo, lo que sucede es que lo manejo con un arreglo porque las preguntas son dinámicas y se configuran en la base de datos. Commented el 31 mar. 2017 a las 2:37
0

Para que se respete tu código es necesario agregar el onchange="cambia_visibles();":

<select name="pregunta[0].ope_id" id="pregunta[0].ope_id" class="form-control selectinput valid" onchange="cambia_visibles();">  
    <option value="44" data_arreglo="33,34,35">EGRESADO</option>  
    <option value="45" data_arreglo="32">NO EGRESADO</option>  
</select>

Prueba la siguiente funcion:

function cambia_visibles() {
    var valores = $('option:selected', this).attr('data_arreglo');
    var valores_array = valores.split(',');
    $(".mostrar").show();
    $("."+valor).hide();
    for(var i = 0; i < valores_array.length; i++) {
        var select_input = "input[value="+valores_array[i]+"]"
        $(select_input).closest('input').hide();
    }
}

Los inputs deben ir como text:

<input type="text" name="pregunta[2].pre_id" id="pregunta[2].pre_id" value="33" data_padre="31">  
0

He aquí una manera, aparatosa cuanto menos, de llegar al select que deseas y añadir el evento change sin hacerlo explícitamente en el html:

window.onload = function(){
                var selects = document.getElementsByTagName("select");
                for (var i = 0; i < selects.length; i++) {
                    var element = selects[i];                    
                    if(element.getElementsByTagName("option")[0].value == "44"){
                       element.addEventListener("change",function(){
                            //aqui ocultas los inputs :)
                       });
                    }
                }
            }
0
  function funcionlogicapreguntas(selc,preid) {
        @{
            foreach (var hr in logica)
            {
                var hcont = hr.pre_id_sec_id_Habilita.Split(',');
                var classnameocult = hr.tipo_sec_pre.GetValueOrDefault() ? ".divnamepregunta" : ".divnameseccion";
                var classnamecontent = "";
                foreach (var h in hcont)
                {
                    if (classnamecontent == string.Empty)
                    {
                        classnamecontent = classnamecontent + classnameocult + h;
                    }
                    else
                    {
                        classnamecontent = classnamecontent +","+ classnameocult + h;
                    }
                }
                @:if (preid == "@hr.pre_id" && $(selc).val()=="@hr.ope_id"){
                @:$("@classnamecontent").show();
                @:} else {
                @:$("@classnamecontent").hide();
                @:}
            }
        }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.