下拉选项，具体取决于javascript中选中的单选按钮

Question

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 setOptions(chosen) 
{ 
//stuff 
} 

it won't work. what's wrong?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

如果您需要从数据库或其他内容中获取选项，则可以考虑使用AJAX。

Answer 7

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