0

Llevo un buen rato trabado en este código que he heredado y parece que no me está pillando bien la opción seleccionada de un select. Me da un error en la línea del " if (combo1.equals("Opcion1"))" ya que me dice que la variable no puede resolver la variable. Mi pregunta es: cómo puedo coger el valor seleccionado del combo1 para que se me muestren unas u otras opciones en el combo2? Os adjunto el bloque de código: Mil gracias!

<table:row>
    <table:cell>  
      Combo 1
    </table:cell>
    <table:cell>
      <html:select name="combo1" value="Opcion1" >
                    <html:option value="Opcion1" >Opcion1</html:option>
                    <html:option value="Opcion2" >Opcion2</html:option>
                    <html:option value="Opcion3" >Opcion3</html:option>
      </html:select>
    </table:cell>
  </table:row>
  <table:row>
    <table:cell>  
      Combo2
    </table:cell>
    <table:cell>
        <%

        if (combo1.equals("Opcion1"))
        {
        %>
        <table:cell>
          <html:select  name="combo2" value="Opcion1" >
            <html:option value="Opcion1" >Opcion1</html:option>         
          </html:select>
        </table:cell>
        <%
        }
        else
        {
        %>
        <table:cell>
          <html:select  name="combo2" value="opcion1" >
            <html:option value="Opcion1" >Opcion1</html:option>
            <html:option value="Opcion2" >Opcion2</html:option>           
          </html:select>
        </table:cell>
        <%
        }
        %>
    </table:cell>
  </table:row>
4
  • ¿como obtienes el valor de combo1?, seria genial que compartas el codigo entero asi podemos saber en que fallas ^^
    – an-tet
    Commented el 4 abr. 2020 a las 19:17
  • @CubitoSenpai Ese es mi problema :D He intentado de varias formas intentar obtener el valor del combo1 para que lo pueda evaluar en el If pero siempre me da el error de que no puede resolver la variable :(
    – Adrian
    Commented el 4 abr. 2020 a las 19:20
  • Ya consulte por todos los medios que tengo si es posible sin servlets y parece que no, no se si pueda realizarse de esa forma, claro que esto es hablando con jsp, eso podrias hacerlo con JS tambien , pero no se si es tu requisito que sea solo JSP.
    – an-tet
    Commented el 4 abr. 2020 a las 20:15
  • o tambien con una variable de sesion o cockie, ya mediras cual te puede servir
    – an-tet
    Commented el 4 abr. 2020 a las 20:24

1 respuesta 1

0

Quiza esto te pueda ayudar.

let array = [
  {
    categoria: 'Frutas',
    producto: 'Manzana'
  },
  {
    categoria: 'Frutas',
    producto: 'Pera'
  },
  {
    categoria: 'Verdura',
    producto: 'Cilantro'
  },
  {
    categoria: 'Verdura',
    producto: 'Platano'
  },
];

//Esta función me ayuda a obtener las diferentes categorías y a retornar una copia del array
let obtenerDiferentes = function(data, descripcion){
  var array = [];
  let ds = null;      
  for(let obj of data){
    if(ds != obj[descripcion]){
      array.push(obj)
      //cuando encuentro un id diferente, seteo a id con ese valor.
      ds = obj[descripcion]
    }
  }
  return JSON.parse(JSON.stringify(array));
}
//Esta función limpia los options del select que coincida con el id enviado como parámetro.
let limpiarSelect = function(id){
  let select = document.getElementById(id);
  select.selectedIndex = null;
  for(let i = 0; i < select.options.length; i++){
    select.options.remove(i);
    //resto 1 al indice porque al ir eliminando, el .length de los options cambia.
    i--;
  }
}

//Cargo las categorías cuando la página completa la carga, esto es necesario para garantizar que los elementos html se carguen
let cargarCategoria = function(){
  //quiero obtener los diferentes valores del array por el criterio de categoria.
  let categorias = obtenerDiferentes(array, 'categoria');
  //accedo al elemento select
  let select = document.getElementById('categoria');
  //recorro las categorías obtenidas anteriormente
  for(let obj of categorias){
    //creo un nuevo elemento option
    let option = document.createElement("option");
    //seteo value y text. Puede parecer innecesario ya que ambas key tienen el mismo valor pero se deja planteado en caso de que se maneje id y descripción
    option.value = obj.categoria;
    option.text = obj.categoria;
    select.add(option)
  }
}
//Ejecuto esta función cuando seleccione un valor diferente de categoría. Esta función carga los productos a partir de una categoría seleccioanda
let cargarProductos = function(){
  //obtengo la posición del valor seleccionado en el select de categoría
  let indexCategoriaSelected = document.getElementById('categoria').selectedIndex;
  //con el indice obtengo el text del options seleccionado
  let valueCategoriaSelected = document.getElementById('categoria').options[indexCategoriaSelected].value;
  //accedo al select de productos
  let select = document.getElementById('producto');
  //es necesario siempre limpiar el select de productos cada vez que selecciono algo nuevo en categoría.
  limpiarSelect('producto');
  //Ahora recorro el array original filtrando los productos por la categoría seleccionada anteriormente.
  for(let obj of array){
    if(obj.categoria == valueCategoriaSelected){
        let option = document.createElement("option");
        option.value = obj.producto;
        option.text = obj.producto;
        select.add(option)
    }
  }
}
window.onload = function(){
  cargarCategoria();
}
<label for="categoria">Catergoria</label><br>
    <select id="categoria" onchange="cargarProductos()"><option>Seleccione una opción</option></select>
    <br>
    <label for="producto">Producto</label><br>
    <select id="producto"><option>Seleccione una opción</option></select>

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.