Ocultar Campos de Texto segun valor de Select!!!

alexisfch · #1 (**permalink**) 17/03/2008, 16:55

Hola, como puedo ocultar o mostrar campos de texto, segun el valor que seleccione de una lista de valores, yo lo he hecho con checkbox y me queda asi:
pero no se como hacerlo con un select, designando que campos se abren con cual o tal valor.

Código HTML:

<html>
<head>
<script>
var i = 0;
function tag(id) {
 return document.getElementById(id);
}

function selector1(check) {
 tag('datoSelect1').style.display = (!check.checked) ? "none" : "inline";
 tag('datoSelect1').disabled = !check.checked;
 tag('dato1a').style.display = (!check.checked) ? "none" : "inline";
 tag('dato1a').disabled = !check.checked;
 tag('dato1b').style.display = (!check.checked) ? "none" : "inline";
 tag('dato1b').disabled = !check.checked;
 i = check.checked ? 1 : 0;
}
function selector2(check) {
 tag('datoSelect2').style.display = (!check.checked) ? "none" : "inline";
 tag('datoSelect2').disabled = !check.checked;
 tag('dato2a').style.display = (!check.checked) ? "none" : "inline";
 tag('dato2a').disabled = !check.checked;
 tag('dato2b').style.display = (!check.checked) ? "none" : "inline";
 tag('dato2b').disabled = !check.checked;
 i = check.checked ? 1 : 0;
}
function selector3(check) {
 tag('datoSelect3').style.display = (!check.checked) ? "none" : "inline";
 tag('datoSelect3').disabled = !check.checked;
 tag('dato3a').style.display = (!check.checked) ? "none" : "inline";
 tag('dato3a').disabled = !check.checked;
 tag('dato3b').style.display = (!check.checked) ? "none" : "inline";
 tag('dato3b').disabled = !check.checked;
 i = check.checked ? 1 : 0;
}
</script>
</head>
<body>
<form method="get">
  <input type="checkbox" id="pago1" onClick="selector1(this)" />
  <input type="checkbox" id="pago2" onClick="selector2(this)" />
  <input type="checkbox" id="pago3" onClick="selector3(this)" />
  <label></label>
  <table width="442" border="1">
    <tr>
      <td width="432"><select style="display: none; width: 200px" disabled name="dato1" id="datoSelect1">
          <option value="dato select 1">select 1</option>
        </select>
        <input type="text" name="dato1a" disabled id="dato1a" style="display: none; width: 100px" />
        <input type="text" name="dato1b" disabled id="dato1b" style="display: none; width: 100px" />
        <select style="display: none; width: 200px" disabled name="dato2" id="datoSelect2">
          <option value="dato select 1">select 1</option>
        </select>
        <input type="text" name="dato2a" disabled id="dato2a" style="display: none; width: 100px" />
        <input type="text" name="dato2b" disabled id="dato2b" style="display: none; width: 100px" />
  <select style="display: none; width: 200px" disabled name="dato3" id="datoSelect3">
<option value="dato select 1">select 1</option>
</select>
<input type="text" name="dato3a" disabled id="dato3a" style="display: none; width: 100px" />
<input type="text" name="dato3b" disabled id="dato3b" style="display: none; width: 100px" /></td>
    </tr>
  </table>
</form>
</body>
</html>

GrACIAS!!

stramin · #2 (**permalink**) 17/03/2008, 18:40

ya hay 3 temas que responden eso en estos 2 ultimos dias, xD busca las respuestas que ya hay