Tengo una pagina con un selector y con varios radio button.
Quiero que al elegir una opcion en el selector, dicha opcion se seleccione tambien en el radio button.
Hasta el momento he conseguido que al pulsar en un radio button se seleccione la opcion que tiene el mismo value (u orden) en el selector, pero no consigo que al elegir una opcion se marque su correspondiente valor en el radio button.
Tanto el selector como los botones de radio se cargan desde una base de datos, por lo que siempre tienen el mismo orden, nombre, id, etc... los dos.
Desde ya les doy las gracias.
Pongo a continuacion el codigo para que se entienda mejor.
Código HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Actualizar radio button al elegir una opcion en el selector</title>
<script type="text/javascript">
function xajax_changeColorImageAttribute(prod_option_value)
{
var i, pos;
var elements = document.getElementById('cmbooption_1');
for(i=0; i<elements.options.length; i++) {
if (elements.options[i].value == prod_option_value) {
// alert(elements.options[i].value);
pos = i;
}
}
elements.selectedIndex = pos;
// alert(elements.selectedIndex);
}
</script>
</head>
<body>
<form name="cart_quantity" action="#" method="post">
<div class="options">
<p class="options-title">Opciones con selector:</p>
<label>Color:</label>
<select name="id[1]" id="cmbooption_1" onChange="xajax_changeColorImageAttribute(this.value);">
<option value="2">Rojo</option>
<option value="1">Azul</option>
<option value="7">Verde</option>
<option value="3">Negro</option>
</select>
</div>
</br><hr>
<div>
<p class="options-title">Opciones con Radio Button:</p>
<label>Color:</label>
<a href="javascript:void(null)" onclick="xajax_changeColorImageAttribute(2);">
<input type="radio" id="cmbooption_1" name="id[1]" value="2" checked="checked"></a>Rojo |
<a href="javascript:void(null)" onclick="xajax_changeColorImageAttribute(1);">
<input type="radio" id="cmbooption_1" name="id[1]" value="1"></a>Azul |
<a href="javascript:void(null)" onclick="xajax_changeColorImageAttribute(7);">
<input type="radio" id="cmbooption_1" name="id[1]" value="7"></a>Verde |
<a href="javascript:void(null)" onclick="xajax_changeColorImageAttribute(3);">
<input type="radio" id="cmbooption_1" name="id[1]" value="3"></a>Negro
</div>
</form>
</body>
</html>