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?
A:
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
Jonathan Feinberg
2009-10-18 13:33:49
i'm trying to use this. i have this codefunction 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?
noob
2009-10-18 14:51:55
`"true"` is not `true`
Jonathan Feinberg
2009-10-18 14:59:28
+1
A:
<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>
Anatoliy
2009-10-18 13:42:52
A:
<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>
Amarghosh
2009-10-18 13:44:25
Radio buttons do not have a closing `input` tag. You should specify their captions via the `label` tag.
Török Gábor
2009-10-18 19:48:45
I wish down voters added a comment describing why this is not the correct way :(
Amarghosh
2009-11-03 04:58:46
A:
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.
Morningcoffee
2009-10-18 13:54:22
A:
if you need to fetch the options from a database or something, you might consider using AJAX.
TheCoolestSid
2009-10-18 14:11:32
A:
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?
noob
2009-10-18 14:52:58
+1
A:
<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
A:
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.
Török Gábor
2009-10-18 19:38:35