1

Tengo varios dropbox y quiero que al seleccionar una opción en uno de ellos, el resto cambie a dicha opción. Los id's y los vals cambian dinámicamente, por lo que no puedo usarlos para seleccionarlos, en su lugar uso el text de cada opción, que sí es el mismo y la letra 'a' de los id's que es común a todos.

El problema lo tengo en que si selecciono un valor en uno de ellos, todos cambian (aquí bien), pero si vuelvo a una opción previa, ya no cambian. Viendo el código fuente dinámicamente, lo que sucede es que a las opciones se les va añadiendo el atributo selected="selected" y no se les borra el anterior, a pesar de que yo lo intento.

Este es el código funcional que he hecho y me produce el error.

$(document).on('change', "select[name^='a']", function() {
  var txt = $("option:selected", this).text();
  console.log(txt);
  $("select[name^='a']").not(this).each(function() {
    $("option:selected", this).attr('selected', false);
    $('option:contains(' + txt + ')', this).attr('selected', 'selected');
  });
});

<select name="a0" id="a0">
    <option value="1" selected="selected">80x180</option>
    <option value="2">80x190</option>
    <option value="3">80x200</option>  
    <option value="4">90x180</option>
    <option value="5">90x190</option>
</select>
<select name="a1" id="a1">
    <option value="6" selected="selected">80x180</option>
    <option value="7">80x190</option>
    <option value="8">80x200</option>
    <option value="9">90x180</option>
    <option value="10">90x190</option>
</select>
<select name="a2" id="a2">
    <option value="11" selected="selected">80x180</option>
    <option value="12">80x190</option>
    <option value="13">80x200</option>
    <option value="14">90x180</option>
    <option value="15">90x190</option>
</select>

En jsfiddle está también.

¿Cómo tengo que hacer para que me borre el select anterior que tuviera el dropbox?

5
  • ¿No vale con el de jsfiddle? (lo desconozco) el 2 ago. 2017 a las 14:49
  • Hola puede mostrar el resto, no se entiende bien a que te refieres cuando dices todos el 2 ago. 2017 a las 15:10
  • El ejemplo que he puesto funciona bien, salvo que si seleccionas por ejemplo 80x190, luego 80x180 y luego otra vez 80x190, verás que en el resto de dropbox no cambia, pues ha puesto en el resto de dropbox selected="selected" en 80x180 y 80x190 sin haber borrado el anterior. Esto sólo se aprecia en el modo debug del navegador, con F12 habitualmente. el 2 ago. 2017 a las 15:14
  • Pregunta, veo que estas usando text() en cuenta de val() que tambien cambian los valores y solo puedes usar el label de la opcion como referencia? el 2 ago. 2017 a las 15:20
  • Correcto, no puedo usar los vals() porque se generean vía bbdd y puede haber distintos vals con mismo label, por eso uso el label como referencia. Tiene su por qué, pero resultaría largo de explicar y no aportaría a la cuentión en si. el 2 ago. 2017 a las 15:21

2 respuestas 2

1

No uses attr usa prop

$("option:selected", this).prop('selected', false);
$('option:contains(' + txt + ')', this).prop('selected', 'selected');

	$( document ).on( 'change', "select[name^='a']", function(){
		var txt = $("option:selected", this).text();
		console.log(txt);
		$("select[name^='a']").not(this).each(function() {
			$("option:selected", this).prop('selected', false);
			$('option:contains(' + txt + ')', this).prop('selected', 'selected');
		});
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="a0" id="a0">
	<option value="1" selected="selected">80x180</option>
	<option value="2">80x190</option>
	<option value="3">80x200</option>
	<option value="4">90x180</option>
	<option value="5">90x190</option>
</select>
<select name="a1" id="a1">
	<option value="6" selected="selected">80x180</option>
	<option value="7">80x190</option>
	<option value="8">80x200</option>
	<option value="9">90x180</option>
	<option value="10">90x190</option>
</select>
<select name="a2" id="a2">
	<option value="11" selected="selected">80x180</option>
	<option value="12">80x190</option>
	<option value="13">80x200</option>
	<option value="14">90x180</option>
	<option value="15">90x190</option>
</select>

http://api.jquery.com/prop/

2
  • Arghh, lo había probado con prop, pero no en ambos sitios. Creí, que como funcionaba con attrib, no era necesario propo el 2 ago. 2017 a las 15:26
  • Si es necesario en ambos, en la documentación explican por que usar prop
    – Lato
    el 2 ago. 2017 a las 16:02
0

Tu código está casi perfecto. El único error está en utilizar:

$().attr("selected", "selected");

La sintaxis correcta es:

$().prop("selected", true);

O:

$().prop("selected", false);

Acá lo tenés funcionando:

https://jsfiddle.net/wh0324Lv/1/

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.