Member Avatar for technopup

Can anyone help?

I want to execute a function depending on what select dropdown is chosen. The select name is dynamic so I need it to happen in one function loop

For e.g. The following function works and returns the correct class but its not going to work for my purposes and I need to wrap some if statements around it.

<script type='text/javascript'>
function div_It(id){
	document.getElementById('div1').className="x" + id + "z";	
}
</script>

however if I choose another select dropdown it eliminates the previous dropdown choice from the div and replaces it with a new class already specified in the CSS.

What I would like to do is

<select name="**the name is dynamically got from database**" onChange="div_It(this.value);">

<script type='text/javascript'>
function div_It(id)
If select name="abc"

{

	document.getElementById('div1').className="x" + id + "z";	
}

If select name="def"

{

	document.getElementById('div2').className="x" + id + "z";	
}

If select name="ghi"

{

	document.getElementById('div3').className="x" + id + "z";	
}
</script>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Can anyone advise me how to add the if statements to the function so that all select dropdowns are catered for and the values are returned to the correct div?

  • 2 Contributors
  • 2 Replies
  • 145 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by technopup

Recommended Answers

All 2 Replies

Member Avatar for parry_kulk

One way that I can think of is that instead of passing this.value in the onchange event of the select box you can pass the object this itself as follows,

<select name="**the name is dynamically got from database**" onChange="div_It(this);">

And than in the div_It() function you can use both the name and value to serve your purpose.

<script type='text/javascript'>
function div_It(id){
     if(id.name=="abc"){
 	document.getElementById('div1').className="x" + id.value + "z";	
     }
     else if(id.name=="def"){
 	document.getElementById('div2').className="x" + id.value + "z";	
     }
     else if(id.name=="ghi"){
 	document.getElementById('div3').className="x" + id.value + "z";	
     }
}
</script>

Though this is not a perfect solution hope it gives you some starting pointers towards solution.

Member Avatar for technopup

You are a genius! Thank you so very much, this is a perfect solution.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.