下拉选项取决于所选的单选按钮在javascript

问题描述：

我有两个单选按钮：校内和校外。当选择校内时，下拉菜单会有一些选项，当选择校外时，会有不同的选项。我怎么能在JavaScript中做到这一点？下拉选项取决于所选的单选按钮在javascript

我试图使用它。我有此代码

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

function setOptions(chosen) 
{ 
//stuff 
}

它不起作用。怎么了？

答

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

单选按钮没有关闭'input'标签。您应该通过'label'标签指定他们的标题。 – 2009-10-18 19:48:45

@Torok更新。另一种方式也很好。 – Amarghosh 2009-10-19 04:03:31

我希望下来选民添加评论，说明为什么这不是正确的方式:( – Amarghosh 2009-11-03 04:58:46

答

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

我正在尝试使用它。我有此代码功能setInCampus的（a）{ \t如果（A == “真”）{ \t \t setOptions（document.form.nature.options [document.form.nature.selectedIndex]。价值） \t } \t } function setOptions（selected）{ // stuff} 它不起作用。怎么了？ – noob 2009-10-18 14:51:55

'“true”'不是'true' – 2009-10-18 14:59:28

答

<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这比我的小巧。 – Amarghosh 2009-10-18 13:45:55

JavaScript关闭时无法访问此解决方案。 – 2009-10-18 19:39:10

答

你可以只在代码同时定义的，并切换使用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。

答

如果您需要从数据库或其他东西中获取选项，您可以考虑使用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>

答

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

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

准确地说，我的观点，优雅退化是要走的路！ – 2009-10-19 18:32:57

下拉选项取决于所选的单选按钮在javascript

相关推荐