Tengo las siguientes selecciones:
<select name="wpf2750_20"> <option value="200">AAA</option> <option value="400">BBB</option> </select> <select name="wpf2750_27"> <option value="600">CCC</option> <option value="800">DDD</option> </select>Y luego el siguiente script:
<script> jQuery('select').on('change', function() { var url = 'http://example.com/file.html' + '?' + this.name + '=' + this.value; alert(url); }); </script>Esto me da la URL correcta con el nombre de la selección una vez que se cambió, así como el valor. Como hay selecciones múltiples, ¿cómo construyo una URL con la cadena completa?
Actualmente me da: http://example.com/file.html?wpf2750_20=AAA
Lo que quiero darme es: http://example.com/file.html?wpf2750_20=AAA?wpf2750_27=CCC
Entonces, con cada selección, se basa en la URL. Si cambian la opción, la URL también debe cambiar para reflejar esto.
Reúna todos los nombres y valores en un objeto. Construya su cadena indexando en ese objeto.
const $selects = $('select'); $selects.on('change', event => { const fragments = Object.fromEntries( $selects.map((i,e) => ([e.name, e.value])).get() ); const url = `http://example.com/file.html?${fragments['wpf2750_20']}=${fragments['wpf2750_27']}`; console.log(url); }); O, de manera más general, cree una cadena de consulta a partir de las select y luego agréguela al prefijo de URL:
const $selects = $('select'); $selects.on('change', event => { const query = $selects.map((i,e) => `${e.name}=${e.value}`).get().join('&'); const url = `http://example.com/file.html?${query}`; console.log(url); });Referencias:
.map() de jQuery.get() de jQueryEs porque su evento solo se activó cuando cambió la entrada, y su código solo captura el elemento que activó el evento.
Si desea capturar cada elemento de selección, en lugar de usar this , debe select cada elemento de selección cuando la entrada de selección haya cambiado.
Puedes probar esto
<script> $('select').on('change', function () { let params = [] $('select').each((i,e)=>{ params.push(`${$(e).prop("name")}=${$(e).val()}`) }) var url = 'http://example.com/file.html' + '?' + params.join("&"); //suppose params on url join with & symbol but you are joining with ? alert(url); }); </script> Reemplace el $ con su jQuery