Avatar of mvanthof
mvanthof asked on

show/hide div using select option

Hello,

this code below is working but, I like to change the value so it match the div id.

some thing like:

<option value="Kies">Choose</option>
div id is than also "Kies"
<div id="Kies" style="display:none">Gratis Artikel test div</div>

<script type='text/javascript'>
 
function toggleSubmit(obj){
 
count=0
while(document.getElementById("d"+count)){
document.getElementById("d"+count).style.display="none"
count++
}
document.getElementById("d"+obj.selectedIndex).style.display="block"
 
}
</script>
 
<SELECT id="ptype" NAME="ptype" onchange="toggleSubmit(this)">
<option value="Kies">Choose</option>
<option value="Gratis Artikel">Gratis Artikel</option>
<option value="Tell a Friend">Tell a Friend</option>
</select>
 
<div id="d0" style="display:none">choose test div</div>
<div id="d1" style="display:none">Gratis Artikel test div</div>
<div id="d2" style="display:none">Tell a Friend test div</div>

Open in new window

JavaScript

Avatar of undefined
Last Comment
JohnSixkiller

8/22/2022 - Mon
krishna kishore mellacheruvu venkata

Please try the following code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type='text/javascript'>
 
function toggleSubmit(obj){
alert(obj.value);
 
 if (obj.value=="Kies")
 {
      document.getElementById("Kies").style.display="block";
      document.getElementById("Gratis Artikel").style.display="none";
      document.getElementById("Tell a Friend").style.display="none";

 }
 else if (obj.value == "Gratis Artikel")
 {
      document.getElementById("Kies").style.display="none";
      document.getElementById("Gratis Artikel").style.display="block";
      document.getElementById("Tell a Friend").style.display="none";

 }
 else if (obj.value == "Tell a Friend")
 {
      document.getElementById("Kies").style.display="none";
      document.getElementById("Gratis Artikel").style.display="none";
      document.getElementById("Tell a Friend").style.display="block";

 }
 

 
}
</script>

 </HEAD>

 <BODY>
  <SELECT id="ptype" NAME="ptype" onchange="toggleSubmit(this)">
<option value="Kies">Choose</option>
<option value="Gratis Artikel">Gratis Artikel</option>
<option value="Tell a Friend">Tell a Friend</option>
</select>
 
<div id="Kies" style="display:none">choose test div</div>
<div id="Gratis Artikel" style="display:none">Gratis Artikel test div</div>
<div id="Tell a Friend" style="display:none">Tell a Friend test div</div>

 </BODY>
</HTML>
ASKER
mvanthof

this is also working but I have more then 30 options in the select list... the if (obj.value will be very long then.. isn't there a easier way?
ASKER CERTIFIED SOLUTION
Pratima

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
JohnSixkiller

Hi,

you can use following code, or use loop. You can also add parent DIV and use its children attribute (array) with obj.selectedIndex .

PS: It possible to change OPTIONs values (to d0 ..dn) for you?
<script type='text/javascript'>
 
var lastSelectedDiv = "Kies";
function toggleSubmit(obj){
   document.getElementById(obj.value).style.display = 'block';
   document.getElementById(lastSelectedDiv).style.display = 'none';
   lastSelectedDiv = obj.value; 
}
</script>
 
<SELECT id="ptype" NAME="ptype" onchange="toggleSubmit(this)">
<option value="Kies">Choose</option>
<option value="Gratis Artikel">Gratis Artikel</option>
<option value="Tell a Friend">Tell a Friend</option>
</select>
 
<div id="Kies" style="display:none">choose test div</div>
<div id="Gratis Artikel" style="display:none">Gratis Artikel test div</div>
<div id="Tell a Friend" style="display:none">Tell a Friend test div</div

Open in new window

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck