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?
text()
en cuenta deval()
que tambien cambian los valores y solo puedes usar el label de la opcion como referencia?