onchange select other div

mraza · August 28, 2010

hi i hv a javascript what it dos is if i select an option it will show related div below, here is code

<script type="text/javascript">
// <![CDATA[
function display(obj,id1) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
}

// ]]>
</script>

<select name="type" onchange="display(this,'first');">
<option>Please select:</option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">third</option>
<option value="fourth">fourth</option>
</select><br />
<div id="first" style="display: none;">
                         show  first     <input name="going" type="text" id="" size="80">
</div>

now what i need is if i selecd Second it will display the next div with id second and hide others, so i can have multiple divs like this, above code is working only for first div.

<div id="first" style="display: none;">
                         show  first     <input name="going" type="text" id="" size="80">
</div>
<div id="second" style="display: none;">
                         show second     <input name="going" type="text" id="" size="80">
</div>
<div id="third" style="display: none;">
                         show third     <input name="going" type="text" id="" size="80">
</div>
//and so on

please any idea how can i do that. Thanks

mraza · August 28, 2010

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script type="text/javascript"> 
// <![CDATA[ 
function display(obj,id1,id2,id3) { 
txt = obj.options[obj.selectedIndex].value; 
document.getElementById(id1).style.display = 'none'; 
document.getElementById(id2).style.display = 'none'; 
document.getElementById(id3).style.display = 'none'; 
if ( txt.match(id1) ) { 
document.getElementById(id1).style.display = 'block'; 
} 
if ( txt.match(id2) ) { 
document.getElementById(id2).style.display = 'block'; 
} 
if ( txt.match(id3) ) { 
document.getElementById(id3).style.display = 'block'; 
} 
} 
// ]]> 
</script> 
<style type="text/css"> 
#id1 { /* The id does not have to match the above script */ 
position:relative; 
display: none;  
} 
#id2 {  
position:relative; 
display: none;  
} 
#id3 {  
position:relative; 
display: none;  
} 
</style> 
</head> 
<body>
<select name="source" onchange="display(this,'id1','id2','id3');"> 
<option class="highlight">Select Heading:</option> 
<option value="id1">One</option> 
<option value="id2">Two</option> 
<option value="id3">Three</option> 
</select> 
<div id="id1"> 
<table width="100%" cellspacing="2" cellpadding="2">
			<tr>
				<td align="right">first: </td>
				<td><input type="text" name="url" /></td>
			</tr>
</table>	
</div> 
<div id="id2"> 
<table width="100%" cellspacing="2" cellpadding="2">
			<tr>
				<td align="right">second: </td>
				<td><input type="text" name="url" /></td>
			</tr>
</table>	
</div> 
<div id="id3"> 
<table width="100%" cellspacing="2" cellpadding="2">
			<tr>
				<td align="right">third: </td>
				<td><input type="text" name="url" /></td>
			</tr>
</table>	
</div>  
</body> </html>

SOLVED

Sign In

onchange select other div

Recommended Posts

mraza

Link to comment

Share on other sites

mraza

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information