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

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

javascript drop-down-menu

下拉选项取决于javascript中选定的单选按钮,javascript,drop-down-menu,Javascript,Drop Down Menu,我有两个单选按钮：校内和校外。选择“校园内”时，下拉列表将有一些选项，选择“校园外”时，将有一组不同的选项。如何在javascript中实现这一点我正试着用这个。我有这个密码 function setInCampus(a) { if(a == "true") { setOptions(document.form.nature.options[document.form.nature.selectedIndex].value) } } function setOptions(c

我有两个单选按钮：校内和校外。选择“校园内”时，下拉列表将有一些选项，选择“校园外”时，将有一组不同的选项。如何在javascript中实现这一点

我正试着用这个。我有这个密码

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

function setOptions(chosen) 
{ 
//stuff 
}

这行不通。怎么了？

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

校园
校外


功能校园（类型）{
document.getElementById（'some_options'）。innerHTML=type？
“选项1选项2”
:
“方案3方案4”；
}
}


无功电流=假；
函数onChange（）
{
var rad=document.getElementById（“radIn”）。已选中；
如果（rad==当前）
返回；
电流=rad；
变量数组=rad？[“in1”、“in2”、“in3”、“in4”、“in5”]：
[“out1”、“out2”、“out3”、“out4”、“out5”]；
var sel=document.getElementById（“下拉菜单”）；
sel.innerHTML=“”；
var-opt；
对于每个（数组中的变量k）
{
//警报（k+“asdsd”）；
opt=document.createElement（“选项”）；
opt.innerHTML=k；
选择附加儿童（opt）；
}
}
校园里


校外

您可以在代码中定义这两个，并使用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>


功能切换选择（id）
{
如果（id=‘关闭’）
{
document.getElementById（'in-campus'）。style['display']='none'；
document.getElementById（“校外”）.style['display']='block'；
}
如果（id='in'）
{
document.getElementById（“校外”）.style['display']='none'；
document.getElementById（'in-campus'）。样式['display']='block'；
}
}
A.
B


在校园里

校外

这种方法的一个更漂亮的变体不需要对JavaScript的支持，它可以优雅地回退到基本的HTML上。

< P>如果你需要从数据库或某些东西中获取选项，你可以考虑使用Ajax。

<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 校园方案2 选择校外活动校外方案1 校外方案2 选择一个选项校园方案1 校园方案2 校外方案1 校外方案2 window.document.getElementById（“noOptions”）.style.display=“block”； window.document.getElementById（“allOptions”）.style.display=“无”；函数changeOptions（）{ var form=window.document.getElementById（“表单”）； var icOptions=window.document.getElementById（“icOptions”）； var ocOptions=window.document.getElementById（“ocOptions”）； window.document.getElementById（“noOptions”）.style.display=“无”；如果（表格radioButton1.选中）{ ocOptions.style.display=“无”； icOptions.style.display=“块”； icOptions.selectedIndex=0； }否则如果（表格radioButton2.选中）{ icOptions.style.display=“无”； ocOptions.style.display=“块”； ocOptions.selectedIndex=0； } } window.document.getElementById（“radioButton1”）.onclick=changeOptions； window.document.getElementById（“radioButton2”）.onclick=changeOptions；

首先，即使禁用JavaScript，也要使表单可用和可访问。创建包含单选按钮下拉列表的HTML标记

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

我正试着用这个。我有一个代码函数setincumpus（a）{if（a==“true”）{setOptions（document.form.nature.options[document.form.nature.selectedIndex.value）}}}函数setOptions（selected）{//stuff}它不起作用。怎么了？关闭JavaScript时无法访问此解决方案。单选按钮没有关闭

input

标记。您应该通过

标签

标记指定他们的标题。我希望他们添加一条注释，说明为什么这不是正确的方式：(

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

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