Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Actualizar (seleccionar) un radio button al seleccionar en un selector en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/03/2014, 01:45
 
Fecha de Ingreso: octubre-2013
Mensajes: 5
Antigüedad: 11 años, 1 mes
Puntos: 0
Actualizar (seleccionar) un radio button al seleccionar en un selector

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> 
  #2 (permalink)  
Antiguo 07/03/2014, 03:12
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 4 meses
Puntos: 29
Respuesta: Actualizar (seleccionar) un radio button al seleccionar en un selector

Te puede servir como base para lo que quieres hacer:
Código Javascript:
Ver original
  1. window.onload = function() {
  2.         var selector = document.getElementById("selector");
  3.  
  4.         selector.addEventListener('change', function() {
  5.           var valor = selector.value;
  6.           xajax_changeColorImageAttribute(valor);
  7.         });
  8.  
  9.         function xajax_changeColorImageAttribute(prod_option_value) {
  10.           var elements = document.getElementsByName('n');
  11.           for (var i = 0; i < elements.length; i++) {
  12.             if (elements[i].value === prod_option_value) {
  13.               elements[i].checked = 'on';
  14.             }
  15.           }
  16.         }
  17.       };
Código HTML:
Ver original
  1. <form name="cart_quantity" action="#" method="post">
  2.       <div class="options">
  3.         <p class="options-title">Opciones con selector:</p>
  4.         <label>Color:</label>
  5.         <select name="selector" id="selector">
  6.           <option value="">Color</option>
  7.           <option value="2">Rojo</option>
  8.           <option value="1">Azul</option>
  9.           <option value="7">Verde</option>
  10.           <option value="3">Negro</option>
  11.         </select>                              
  12.       </div>
  13.       <br /><hr />
  14.       <div>
  15.         <p class="options-title">Opciones con Radio Button:</p>
  16.         <label>Color:</label>
  17.         <a href="javascript:void(null)">
  18.           <input type="radio" id="cmbooption_1" name="n" value="2" checked="checked"></a>Rojo &nbsp;|&nbsp;
  19.         <a href="javascript:void(null)">
  20.           <input type="radio" id="cmbooption_2" name="n" value="1"></a>Azul &nbsp;|&nbsp;
  21.         <a href="javascript:void(null)">
  22.           <input type="radio" id="cmbooption_3" name="n" value="7"></a>Verde &nbsp;|&nbsp;
  23.         <a href="javascript:void(null)">
  24.           <input type="radio" id="cmbooption_4" name="n" value="3"></a>Negro
  25.       </div>
  26.     </form>
  #3 (permalink)  
Antiguo 07/03/2014, 18:18
 
Fecha de Ingreso: octubre-2013
Mensajes: 5
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Actualizar (seleccionar) un radio button al seleccionar en un selector

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> 

Etiquetas: button, inputs, onchange, onclick, radio, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:59.