Dropdown-Optionen je nach ausgewählter Optionsschaltfläche in javascript

Question

Ich habe zwei Radio-Schaltflächen: in-Campus und off-Campus. wenn in-Campus ausgewählt ist, wird das Dropdown einige Optionen haben und wenn off-Campus ausgewählt ist, gibt es eine andere Reihe von Optionen. wie kann ich dies in Javascript tun?

---

Ich versuche, dies zu verwenden. Ich habe diesen Code

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

function setOptions(chosen) 
{ 
//stuff 
} 

Es funktioniert nicht. Was ist los?

Answer 1

Zunächst einmal sollte das Formular auch bei deaktiviertem JavaScript nutzbar und zugänglich sein. Erstellen Sie ein HTML-Markup, das die Dropdown-Listen für die Optionsfelder enthält.

Dann, wenn JavaScript aktiviert ist, blenden Sie die Dropdown-Elemente beim Laden des Dokuments aus, und fügen Sie einen Event-Handler an die Optionsschaltflächen an, so dass die Sichtbarkeit der entsprechenden Dropdown-Liste umgeschaltet wird, wenn einer von ihnen markiert wurde.

Answer 2

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

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

Optionsfelder können einen onClick-Handler haben.

<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

Sie könnten einfach beide 's im Code definieren und die Sichtbarkeit mit Javascript umschalten. Etwas wie dies:

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

Eine hübschere Variante dieses Ansatzes würde keine Unterstützung für Javascript erfordern, sondern würde auf einfache HTML zurückgreifen.