1

Organizar datos separados por coma(,) y punto y coma(;), cuando selecciono una marca se debe crear una variable donde van a ir cada valor seleccionado separados por punto y coma(;), cuando selecciono un modelo se debe crear una variable nueva donde va ir cada valor seleccionado separado por coma(,).

Tener en cuenta lo siguiente:
Si los modelos seleccionados pertenecen a la misma marca deben ir separados por coma(,) si no son iguales deben ir separados por punto y coma(;), el orden es importante, es decir a la marca situada en la posición n le deben corresponder los modelos situados en la posición n
Algo asi:

Marcas: "A1;A2;A3"
Modelos: "A11,A12,A13;A21,A22,A23;A31,A32,A33"

var mModelos = [
    {
        codigo: "3868",
        marca: "505",
        nombre: "120I"
    },
    {
        codigo: "4869",
        marca: "505",
        nombre: "SUPER LAMON"
    },
    {
        codigo: "5131",
        marca: "477",
        nombre: "SERIE 4"
    },
    {
        codigo: "4596",
        marca: "477",
        nombre: "DS CROSSBACK"
    },
    {
        codigo: "6666",
        marca: "495",
        nombre: "NISSAN"
    },
    {
        codigo: "6868",
        marca: "495",
        nombre: "JI"
    }
]

function cambioMarca()
{
    codigoMarca = document.getElementById("marca").value
 
    selectModelos = document.getElementById('modelo');
    
    for(var c=0;c< mModelos.length;c++)
    {
        if (mModelos[c]["marca"] == codigoMarca)
        {
            var opt = document.createElement('option');
            opt.value = mModelos[c]["codigo"] ;
            opt.innerHTML = mModelos[c]["nombre"] ;
            selectModelos.appendChild(opt);
        }
    }

}
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>

</head>
<body>
    <div>
        <div>
            <p> Ingresa tu busqueda.</p>
            <select class="form-control" id="marca" name="marca" onchange='cambioMarca()'>
                <option value="0">MARCA</option>
                <option value="495">ACADIAN</option>                        
                <option value="505">ACURA</option>
                <option value="477">AEROVAN</option>
            </select>
        </div>
        <div class="form-group col-md-8">
            <select class="form-control" id="modelo" name="modelo">
                <OPTION value='0'>MODELO</OPTION>
            </select>
        </div>
    </div>
</body>
</html>

1 respuesta 1

2

A ver qué te parece esto: como los modelos ya incluyen la marca seleccionada, no hacemos nada especial cuando se selecciona una marca. Al seleccionar un modelo, guardamos toda la información.

Entonces podemos simplemente ver el histórico de modelos seleccionados, ordenarlos por marca y entonces obtener los distintos modelos y sus marcas:

const mModelos = [
	{ codigo: "3868", marca: "505", nombre: "120I" },
	{ codigo: "4869", marca: "505", nombre: "SUPER LAMON" },
	{ codigo: "5131", marca: "477", nombre: "SERIE 4" },
	{ codigo: "4596", marca: "477", nombre: "DS CROSSBACK" },
	{ codigo: "6666", marca: "495", nombre: "NISSAN" },
	{ codigo: "6868", marca: "495", nombre: "JI" }
]

const selectMarca = document.getElementById('marca');
const selectModelos = document.getElementById('modelo');
selectMarca.addEventListener('change',cambioMarca);
selectModelos.addEventListener('change',modeloSeleccionado);

let selecciones = [];

function cambioMarca() {
	const codigoMarca = selectMarca.value;
  console.log('Seleccionada la marca',codigoMarca);
  
	for (var c = 0; c < mModelos.length; c++) {
		if (mModelos[c]["marca"] == codigoMarca) {
			var opt = document.createElement('option');
			opt.value = mModelos[c]["codigo"];
			opt.innerHTML = mModelos[c]["nombre"];
			selectModelos.appendChild(opt);
		}
	}
}
  
function modeloSeleccionado() {
  if (selectModelos.value == '0') {
    return;
  }
  const modelo = selectModelos.value;
  console.log('Seleccionado el modelo', modelo);
  let datos= mModelos.find(m => m.codigo === modelo);
  selecciones.push(datos);
  selecciones.sort((a,b) => (+a.marca) - (+b.marca));
  mostrar();
}


function mostrar() {
  let modelos = '';
  let uMarca = selecciones[0].marca;
  let marcas = uMarca;
  selecciones.forEach(s => {
    if (s.marca != uMarca) {
      marcas += ';' + s.marca;
      uMarca = s.marca;
      if (modelos !== '') {
        modelos += ';'
      }
    }else if (modelos !== '') {
    
      modelos += ',';
    }
    modelos += s.codigo;
  });
  
  console.log('Marcas:', marcas);
  console.log('Modelos:', modelos);
}
<div>
    <p> Ingresa tu busqueda.</p>
    <select class="form-control" id="marca" name="marca">
        <option value="0">MARCA</option>
        <option value="495">ACADIAN</option>                        
        <option value="505">ACURA</option>
        <option value="477">AEROVAN</option>
    </select>
</div>
<div class="form-group col-md-8">
    <select class="form-control" id="modelo" name="modelo">
        <OPTION value='0'>MODELO</OPTION>
    </select>
</div>

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.