drop down options depending on the selected radio button in javascript

i have two radio buttons: in-campus and off-campus. when in-campus is selected the dropdown will have some options and when off-campus is selected there will be a different set of options. how can i do this in javascript?

i'm trying to use this. i have this code

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

function开发者_如何学JAVA setOptions(chosen) 
{ 
//stuff 
} 

it won't work. what's wrong?

First of all, make form usable and accessible even with JavaScript is disabled. Create an HTML markup that contains the dropdown lists for the radio buttons.

Then when JavaScript is enabled, hide element the dropdown elements on document load, and attach and event handler to radio buttons, so when of one them was checked, toggle visibility of the proper dropdown list.

<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>

<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>

Radio buttons can have an onClick handler.

<INPUT TYPE="radio" NAME="campustype" VALUE="incampus" onClick="setInCampus(true)">in-campus
<INPUT TYPE="radio" NAME="campustype" VALUE="offcampus" onClick="setInCampus(false)">off-campus

You could just define both 's in the code, and toggle visibility with javascript. Something like this:

<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>

A prettier variant of this approach would not require support for javascript, it would gracefully fallback on basic html.

if you need to fetch the options from a database or something, you might consider using AJAX.

<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>