Tengo dos botones de radio: dentro del campus y fuera del campus. cuando se selecciona dentro del campus, el menú desplegable tendrá algunas opciones y cuando se selecciona fuera del campus habrá un conjunto diferente de opciones. ¿Cómo puedo hacer esto en JavaScript?


Estoy tratando de usar esto. tengo este codigo

function setInCampus(a) { 
  if(a == "true") {  
setOptions(document.form.nature.options[document.form.nature.selectedIndex].value) } 
} 

function setOptions(chosen) 
{ 
//stuff 
} 

No funcionará. que pasa

2
noob 18 oct. 2009 a las 17:04

7 respuestas

La mejor respuesta
<html>
    <head>
        <script language="javascript">
            var current = false;
            function onChange()
            {
                var rad = document.getElementById("radIn").checked;
                if(rad == current)
                    return;
                current = rad;
                var array = rad ? ["in1","in2","in3","in4","in5"] : 
                    ["out1","out2","out3","out4","out5"];
                var sel = document.getElementById("dropDown");
                sel.innerHTML = "";
                var opt;
                for each(var k in array)
                {
                    //alert(k + " asdsd");
                    opt = document.createElement("option");
                    opt.innerHTML = k;
                    sel.appendChild(opt);
                }
            }
        </script>
    </head>
    <body onload="onChange();">
        <input type="radio" value="in" name="campus" onclick="onChange()" 
            id="radIn" checked="true"/>
        <label for="radIn">In Campus</label>
        <br/>
        <input type="radio" value="out" name="campus" onclick="onChange()" 
        id="radOut"/>
        <label for="radOut">Out Campus</label>
        <br/>
        <select id="dropDown"/>
    </body>
</html>
-2
Amarghosh 19 oct. 2009 a las 04:02

Si necesita obtener las opciones de una base de datos o algo, puede considerar usar AJAX.

-1
TheCoolestSid 18 oct. 2009 a las 14:11

Simplemente puede definir ambos en el código y alternar la visibilidad con javascript. Algo como esto:

<html>
<head>

<script type="text/javascript">
function toggleSelect(id)
{
    if (id == 'off')
    {
          document.getElementById('in-campus').style['display'] = 'none';
          document.getElementById('off-campus').style['display'] = 'block';
    }

    if (id == 'in')
    {
          document.getElementById('off-campus').style['display'] = 'none';
          document.getElementById('in-campus').style['display'] = 'block';
    }
}
</script>
</head>
<body>

<select id='in-campus'>
<option>a</option>
</select>

<select id='off-campus' style='display: none;'>
<option>b</option>
</select>

<br />

<input type='radio' name='campustype' value='in' onclick="toggleSelect('in');" checked='1' /><label for='incampus'>In-campus</label><br />

<input type='radio' name='campustype' value='off' onclick="toggleSelect('off');" /><label for='offcampus'>Off-campus</label>

</body>
</html>

Una variante más bonita de este enfoque no requeriría soporte para javascript, sino que sería un recurso alternativo en html básico.

0
Martin Nycander 18 oct. 2009 a las 13:54

Los botones de radio pueden tener un controlador onClick.

<INPUT TYPE="radio" NAME="campustype" VALUE="incampus" onClick="setInCampus(true)">in-campus
<INPUT TYPE="radio" NAME="campustype" VALUE="offcampus" onClick="setInCampus(false)">off-campus
0
Jonathan Feinberg 18 oct. 2009 a las 13:33
<form name="form" id="form" action="">  

<input type="radio" id="radioButton1" name="radioButton" value="in-campus" />
<label for="radioButton1">in-campus</label>
<input type="radio" id="radioButton2" name="radioButton" value="of-campus" />
<label for="radioButton2">off-campus</label>

<select name="noOptions" id="noOptions" style="display: none"> 
    <option value="Choose an Option" selected="selected">Choose an Option</option>
</select>

<select name="icOptions" id="icOptions" style="display: none"> 
    <option value="Choose an Option" selected="selected">Choose an in-campus option</option>
    <option value="icOption1">in-campus option 1</option>
    <option value="icOption2">in-campus option 2</option>
</select>

<select name="ocOptions" id="ocOptions" style="display: none"> 
    <option value="Choose an Option" selected="selected">Choose an off-campus option</option>
    <option value="ocOption1">off-campus option 1</option>
    <option value="ocOption2">off-campus option 2</option>
</select>

<select name="allOptions" id="allOptions" style="display: block"> 
    <option value="Choose an Option" selected="selected">Choose an Option</option>
    <option value="icOption1">in-campus option 1</option>
    <option value="icOption2">in-campus option 2</option>
    <option value="ocOption1">off-campus option 1</option>
    <option value="ocOption2">off-campus option 2</option>
</select>
</form>

<script>
window.document.getElementById("noOptions").style.display = "block";
window.document.getElementById("allOptions").style.display = "none";
function changeOptions() {
    var form = window.document.getElementById("form");
    var icOptions = window.document.getElementById("icOptions");
    var ocOptions = window.document.getElementById("ocOptions");

    window.document.getElementById("noOptions").style.display = "none";

    if (form.radioButton1.checked) {
        ocOptions.style.display = "none";
        icOptions.style.display = "block";
        icOptions.selectedIndex = 0;
    } else if (form.radioButton2.checked) {
        icOptions.style.display = "none";
        ocOptions.style.display = "block";
        ocOptions.selectedIndex = 0;
    }

}
window.document.getElementById("radioButton1").onclick = changeOptions;
window.document.getElementById("radioButton2").onclick = changeOptions;
</script>
1
GR1000GR1000 18 oct. 2009 a las 19:21
<form>
    <input type="radio" onclick="campus(0)" value="On" id="campus_on" />
    <label for="campus_on" />
    <input type="radio" onclick="campus(1)" value="off" />
    <label for="campus_off" />
    <select id="some_options">

    </select>
</form>
<script>
    function campus(type) {
        document.getElementById('some_options').innerHTML = type ?
            '<option>option 1</option><option>option 2</option>'
            :
            '<option>option 3</option><option>option 4</option>';
        }
    }
</script>
1
Anatoliy 18 oct. 2009 a las 13:42

En primer lugar, hacer que el formulario sea utilizable y accesible incluso con JavaScript deshabilitado. Cree un marcado HTML que contenga las listas desplegables para los botones de opción.

Luego, cuando JavaScript esté habilitado, oculte los elementos desplegables en la carga del documento y adjunte un controlador de eventos a los botones de opción, de modo que cuando se marque uno de ellos, cambie la visibilidad de la lista desplegable adecuada.

2
viam0Zah 18 oct. 2009 a las 19:38