Jump to content


Photo

JS switch question


  • Please log in to reply
1 reply to this topic

#1 centenial

centenial
  • Members
  • PipPipPip
  • Advanced Member
  • 59 posts

Posted 03 July 2006 - 07:19 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title>
<script language="javascript">
function selected_value(obj) {
    return obj.options[obj.selectedIndex].value
}
function show_node(dom_id) {
    document.getElementById(dom_id).style.display = "block";
}
function isolate(my_id) {
	for(i = 1; i <= 2; i++) {
		if("option" + i == my_id) {
			show_node("option" + i);
		}
        else {
	        element = document.getElementById("option" + i);
			element.style.display = "none";
	        //element.parentNode.removeChild(element);
        }
    }
}
</script>
</head>
<body>
    <select name="dropdown" onchange="isolate(selected_value(this));">
        <option>SELECT</option>
        <option value="option1">option1</option>
        <option value="option2">option2</option>
    </select>
    <div id="option1" style="display: none;">
        Div 1 Text
    </div>
    <div id="option2" style="display: none;">
        Div 2 Text
    </div>
</body>
</html>  

Could someone show me how to do the exact same thing, except with (two) radio buttons?

Thanks!

#2 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 03 July 2006 - 07:45 PM

something like this will work,
<script language="javascript">
	function hide(){
		document.getElementById('option1').style.display = "none";
		document.getElementById('option2').style.display = "none";
	}
	function show_div(wdiv){
		hide();
		document.getElementById(wdiv).style.display = "block";
	}
</script>

<input type="radio" onClick="show_div(this.value)" value="option1" name="options" /> Option 1<br />
	<input type="radio" onClick="show_div(this.value)" value="option2" name="options" /> Option 2<br />

    <div id="option1" style="display: none;">
        Div 1 Text
    </div>
    <div id="option2" style="display: none;">
        Div 2 Text
    </div>

NoGray.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users