0

Yo cree un código que por ejemplo si estoy en la URL actual www.dominio.com/?&filter_altura=180 y selecciono una opción de la lista me envía a la url www.dominio.com/?&filter_color=rojo.

Lo que yo necesito es que si estoy en la URL www.dominio.com/?&filter_altura=180 y selecciono una opción de la lista me envie a la url www.dominio.com/?&filter_altura=180?&filter_color=rojo.

Mi código hasta el momento es el siguiente

<select class="myselect">
  <option selected>Seleccionar Color</option>
  <option data-url="?&filter_color=rojo">Rojo</option>
  <option data-url="?&filter_color=amarillo">Amarillo</option>
  <option data-url="?&filter_color=azul">Azul</option>
</select>
</div>

<script>
const select = document.querySelector(".myselect");
const options = document.querySelectorAll(".myselect option");
 
// 1
select.addEventListener("change", function() {
  const url = this.options[this.selectedIndex].dataset.url;
  if(url) {
    location.href = url;
  }
});
 
// 2
for(const option of options) {
  const url = option.dataset.url;
  if(location.href.includes(url)) {
    option.setAttribute("selected", "");
    break;
  }
}

1 respuesta 1

0

Puedes utilizar una URL() para poder manipular sencillo la url y los parámetros. No se por qué agregaste una propiedad data a tus select, si tiene una propiedad value que puedes explotar. Te dejo un ejemplo de cómo podrías implementarlo

const color = document.querySelector('.color');
const altura = document.querySelector('.altura');
const url = new URL('http://www.dominio.com');

color.addEventListener( 'change', function() {
  url.searchParams.set('filter_color', this.value);
  console.log( url );
});

altura.addEventListener( 'change', function() {
  url.searchParams.set('filter_altura', this.value);
  console.log( url );
});
<select class="color">
  <option selected>Seleccionar Color</option>
  <option value="rojo">Rojo</option>
  <option value="amarillo">Amarillo</option>
  <option value="azul">Azul</option>
</select>


<select class="altura">
  <option selected>Seleccionar Color</option>
  <option value="180">180 metros</option>
  <option value="190">190 metros</option>
  <option value="200">200 metros</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.