Cuadro de selección múltiple y enviar valores como parámetros de url

Tengo este html:

 Flowers Shrubs Trees Bushes Grass Dirt   po1 po2 po3 po4 po5 po6  

Quiero enviar valores de las opciones seleccionadas como parámetros de url. Con este javascript:

 $("select").change(function () { var id = $(this).attr('name'); var str = ""; $("select option:selected").each(function () { str += "&"+id+"="+ $(this).attr('value'); }); $("div").text(str); }) .trigger('change'); 

Cuando el otro cuadro de selección cambia, str se reemplaza por otro: http://jsfiddle.net/eZKUU/

¿Cómo puedo enviar valores a url sin reemplazar?

Gracias por adelantado

Tienes el código casi correcto. El único error es que está almacenando el nombre de selección modificado en la identificación de la variable y luego usándolo en la creación de cadenas. Esto debería funcionar correctamente:

 $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += '&' + $(this).parent().attr('name') + "="+ $(this).attr('value'); }); $("div").text(str); }); 

Y la simple optimización siempre es una buena práctica 🙂

 $("select").change(function () { var str = ""; $("select option:selected").each(function () { var option = $(this); str += '&' + option.attr('name') + "="+ option.attr('value'); }); $("div").text(str); }); 

Debería capturar los valores de los cuadros seleccionados por separado en función de la ID. Yo sugeriría usar dos cadenas diferentes como esta:

 $("#po").change(function () { var id = $(this).attr('name'); var str = ""; $("#po option:selected").each(function () { str += "&"+id+"="+ $(this).attr('value'); }); $("div").text(str); }) .trigger('change'); $("#garden").change(function () { var id = $(this).attr('name'); var str2 = ""; $("#garden option:selected").each(function () { str2 += "&"+id+"="+ $(this).attr('value'); }); $("div").text(str2); }) .trigger('change'); 

De la forma en que lo hace actualmente, solo asume que todas las opciones seleccionadas forman parte del mismo cuadro de selección y concatena al final de la cadena. Si mantiene dos cadenas separadas para los cuadros de selección, puede combinarlas cuando sea el momento de enviar las URL observando los valores de str y str2 .

Puede que tenga que adaptar esto un poco para que tenga sentido para su proyecto, pero la idea general debe seguir siendo la misma.

http://jsfiddle.net/rawsmell/eZKUU/1/

EDITAR :

Use esto en su lugar:

 $("select").change(function () { //var id = $(this).attr('name'); var str = ""; $("select option:selected").each(function () { var id = $(this).parent().attr('name'); str += "&"+id+"="+ $(this).attr('value'); }); $("div").text(str); }) .trigger('change');