[SOLUCIONADO] Actualizar (seleccionar) un radio button al seleccionar en un selector

fernandofigue · #1 (**permalink**) 07/03/2014, 01:45

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 &nbsp;|&nbsp;
							<a href="javascript:void(null)" onclick="xajax_changeColorImageAttribute(1);">
							<input type="radio" id="cmbooption_1" name="id[1]" value="1"></a>Azul &nbsp;|&nbsp;
							<a href="javascript:void(null)" onclick="xajax_changeColorImageAttribute(7);">
							<input type="radio" id="cmbooption_1" name="id[1]" value="7"></a>Verde &nbsp;|&nbsp;
							<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>

bathorz · #2 (**permalink**) 07/03/2014, 03:12

Te puede servir como base para lo que quieres hacer:

Código Javascript:

Ver originalwindow.onload = function() {
        var selector = document.getElementById("selector");
 
        selector.addEventListener('change', function() {
          var valor = selector.value;
          xajax_changeColorImageAttribute(valor);
        });
 
        function xajax_changeColorImageAttribute(prod_option_value) {
          var elements = document.getElementsByName('n');
          for (var i = 0; i < elements.length; i++) {
            if (elements[i].value === prod_option_value) {
              elements[i].checked = 'on';
            }
          }
        }
      };

Código HTML:

Ver original<form name="cart_quantity" action="#" method="post">
      <div class="options">
        <p class="options-title">Opciones con selector:</p>
        <label>Color:</label>
        <select name="selector" id="selector">
          <option value="">Color</option>
          <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)">
          <input type="radio" id="cmbooption_1" name="n" value="2" checked="checked"></a>Rojo &nbsp;|&nbsp;
        <a href="javascript:void(null)">
          <input type="radio" id="cmbooption_2" name="n" value="1"></a>Azul &nbsp;|&nbsp;
        <a href="javascript:void(null)">
          <input type="radio" id="cmbooption_3" name="n" value="7"></a>Verde &nbsp;|&nbsp;
        <a href="javascript:void(null)">
          <input type="radio" id="cmbooption_4" name="n" value="3"></a>Negro
      </div>
    </form>

fernandofigue · #3 (**permalink**) 07/03/2014, 18:18

Gracias bathors por tu ayuda.
Siguiendo el ejemplo he logrado hacer lo que queria, a continuacion pongo el codigo para que veas como ha quedado por si vieses algo que no te parezca bien.

Tengo que decir que esta funcion la uso "dentro" de otra funcion que tengo de algo que hice hace tiempo con xajax y no podia ponerlo como habias propuesto.

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 sel = document.getElementById('cmbooption_1');
          var rad = document.getElementsByName('id[1]');
          for (i = 0; i < rad.length; i++) {
            if (rad[i].value == prod_option_value) {
              rad[i].checked = 'on';
 //    alert('Value: ' + rad[i].value + '\n' + 'checked: ' + rad[i].checked);
            }
          }
		  
          for (i = 0; i <sel.options.length; i++) {
	        if (sel.options[i].value == prod_option_value) {
 //    alert(sel.options[i].value);
           pos = i;
        }
      }
 
    sel.selectedIndex = pos;
  //   alert(sel.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 &nbsp;|&nbsp;
							<a href="javascript:void(null)" onClick="xajax_changeColorImageAttribute(1);">
							<input type="radio" id="cmbooption_1" name="id[1]" value="1"></a>Azul &nbsp;|&nbsp;
							<a href="javascript:void(null)" onClick="xajax_changeColorImageAttribute(7);">
							<input type="radio" id="cmbooption_1" name="id[1]" value="7"></a>Verde &nbsp;|&nbsp;
							<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>