Question

我有两个单选按钮：校内和校外。当选择校内时，下拉列表将有一些选项，当选择校外时，将有一组不同的选项。我怎么能在javascript中做到这一点？

我正在尝试使用它。我有这个代码

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

function setOptions(chosen) 
{ 
//stuff 
}

它不起作用。怎么了？

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

首先，即使禁用JavaScript，也可以使表单可用且可访问。创建一个HTML标记，其中包含单选按钮的下拉列表。

然后，当启用JavaScript时，将元素隐藏在文档加载上的下拉元素，并将附加和事件处理程序附加到单选按钮，因此当选中它们时，切换正确下拉列表的可见性。

Answer 4

单选按钮可以有一个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

Answer 5

您可以在代码中定义两者，并使用javascript切换可见性。像这样：

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

这种方法的一个更漂亮的变体不需要支持javascript，它会优雅地回退基本的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>

下拉选项取决于javascript中选定的单选按钮

7 个答案: