como cambiar options en un select en un formlario

severicks · #1 (**permalink**) 03/05/2012, 13:56

Hola.

Me preguntaba como puedo hacer para cambiar todos los valores de options dentro de un select en un formulario, dependiendo de del valor que tome otro campo select... por ejemplo

Si tengo:

Código Javascript:

Ver originalvar total = 15

y

Código HTML:

Ver original<select name="adult" onChange="multiplicar();">
 
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
     <option value="9">9</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option>
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15</option>
 
</select>

Ahora, como puedo hacer para que si el usuario elige por ejemplo "5", en el segundo select los campos de options solo lleguen hasta 10

chinanzio · #2 (**permalink**) 03/05/2012, 14:07

algo asi ?

no entiendo la ultima frase:

Cita:

como puedo hacer para que si el usuario elige por ejemplo "5", en el segundo select los campos de options solo lleguen hasta 10

debería ser 5 ?? o 10 ?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
function onChangeSelect(select) {
    var segundoSelect = document.getElementById("segundo-select");
 
    segundoSelect.options.length = 0;
    var total = parseInt(select.value);
    for (var i= 1; i <= total ; i++) {
        var option = new Option(i, i);
        segundoSelect.options.add(option);
    }
}
</script>
</head>
<body>
    <select onchange="javascript:onChangeSelect(this);">
        <option value="">seleccionar</option>
        <option value="1">1</option>
        <option value="10">10</option>
        <option value="20">20</option>
    </select>
    
    <select id="segundo-select">
    </select>
</body>
</html>

severicks · #3 (**permalink**) 03/05/2012, 14:34

Gracias chinanzio.
Como podria hacer para que el cambio fuera para los dos selects, por ejemplo, tengo estos dos selects

Código HTML:

Ver original<select name="select1" onChange="multiplicar();">
 
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="5">6</option>
 
</select> 
 
<select name="select2" onChange="multiplicar();">
 
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
 
</select>

Si el usuario elige la opción 2 (en select2), en select1 solo se mostraran las opciones 1,2,3,4, o si elige la opcion 4 (en select1), en select2 solo se muestra la opcion 1. No se si me doy a entender.

chinanzio · #4 (**permalink**) 03/05/2012, 15:54

esto te sirve ?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
function onChangeSelect(selectQueCambioElUsuario) {
    var primerSelect = document.getElementById("primer-select");
    var segundoSelect = document.getElementById("segundo-select");
 
    var selectQueHayQueCambiarleLosOptions = selectQueCambioElUsuario == primerSelect ?  segundoSelect : primerSelect;
    var totalaOcultar = parseInt(selectQueCambioElUsuario.value);
    var length = selectQueHayQueCambiarleLosOptions.length;
    for (var i = 0; i < length; i++) {
        var optionaOcultar = selectQueHayQueCambiarleLosOptions.options[i];
        var displayStr = (i < length - totalaOcultar) ? "" : "none";
        optionaOcultar.style.display = displayStr;
    }
}
</script>
</head>
<body>
    <select id="primer-select" onchange="javascript:onChangeSelect(this);">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
 
    <select id="segundo-select" onchange="javascript:onChangeSelect(this);">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</body>
</html>

es lo que entendí, que a lo mejor lo entendí mal, la cosa es que se ocultan la cantidad de opciones del otro select que se selccionan en un select :P jeje