Reemplazar href en el cambio de selección

Tengo un elemento seleccionado con opciones con valores que son algunos numbers (algunos id).

<select id="select"> <option value="21">Random<option> <option value="23">Random 2<option> <option value="25">Random 3<option> <option value="27">Random 4<option> </select> 

Al lado hay un button de enviar que formará algún tipo de envío.

 <a class="button" href="www.random.org">Click me!</a> 

Necesito agregar ?id= a ese enlace, con el valor id de la selección. Creé el código, pero el problema es que simplemente agrega el ?id= cada vez que cambio, select la opción

 var id; $('#select').on('change', function(){ id = $(this).val(); var new_href = $('.button').attr('href') + '?id=' + id; $('.button').attr('href', new_href); }); 

Entonces, cuando hago clic en la primera opción, href el href

 www.random.org?id=21 

Pero si hago clic en el segundo (o cualquier otro) recibo

 www.random.org?id=21?id=23 

Aade el id. ¿Cómo 'limpiar' la identificación anterior en el cambio, y replacela con la seleccionada? ¿Qué estoy haciendo mal?

6 Solutions collect form web for “Reemplazar href en el cambio de selección”

Esto debería funcionar.

 var id; var original_link = "www.random.org"; $('#select').on('change', function(){ $('.button').attr('href', original_link); id = $(this).val(); var new_href = $('.button').attr('href') + '?id=' + id; $('.button').attr('href', new_href); }); 

puedes probar como este enlace de button de cambio

 <a class="button" href="www.random.org" data-link="www.random.org">Click me!</a> 

y cambiar javascript como este

 var id; $('#select').on('change', function(){ id = $(this).val(); var new_href = $('.button').data('link') + '?id=' + id; $('.button').attr('href', new_href); }); 

Creo que es útil para ti.

Puede pasar a la function .attr como segundo argumento, donde puede replace url por .button , como tal

 $('#select').on('change', function(){ var id = $(this).val(); $('.button').attr('href', function (index, value) { // if there is id in url - replace it, else add id to url return /\?id=/.test(value) ? value.replace(/id=(\d+)/, 'id=' + id) : (value + '?id=' + id); }); }); 

Ejemplo

Respetando todas las demás respuestas, preferiría una pequeña cantidad de código:

 $('#select').on('change', function(){ $( '.button' ).attr( 'href', $( '.button' ).attr( 'href' ).split( '?id=' )[0] + '?id=' + $( this ).val() ); }); 

Este código realmente divide el href cuando a ?id= existe y le da solo la parte anterior. Cuando no hay ?id= que obtiene el href normal y luego de esto, simplemente agrega ?id= y $( this ).val() al href. (Ya está en el código que escribí)

Eso es. Sin RegEx, Wordarounds o más líneas de código de las necesarias.

 $target = $(".target"); $button = $(".button"); 

Con jQuery puedes $target.attr('href', $button.data('href-url') + '?id=' + id))

Verifique esta demostración

 $('#select').on('change', function() { var aLink = $('.button'), selVal = $(this).val(), staticLink = "www.random.org"; //alert(selVal) $(aLink).attr('href', staticLink + "?id=" + selVal); }) 
  • Dynamic jQuery Validate los posts de error con AddMethod en function del elemento
  • ¿Puedo determinar qué tecla se presionó previamente? JavaScript
  • ¿puedes usar jquery para ver si un objective contiene una label <b>?
  • Cómo eliminar los campos padre en la variable json y convertirlo a json en javascript o jquery
  • Knockout: actualizar manualmente un código observable a través de?
  • Onclick day close bootstrap datepicker
  • jQuery envuelve un div alnetworkingedor de un bloque masivo de HTML
  • jQGrid, cómo hacer que una columna se pueda editar en el cuadro de dialog Agregar pero no durante las ediciones (en línea)
  • Javascript: ¿cómo evitar las declaraciones largas / feas if / else?
  • jQuery insertado en DOM no compatible con varios browseres
  • suprimir el dialog de confirmación mientras se usa onbeforeunload
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.