• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 189
  • Last Modified:

How can I find all the Drop Down list controls in my page?

hi Experts
I have an anchor that is doing this:<a id="smallA" onclick="setActiveStyleSheet('small'); return false;" href="#">
and the CSS :
#smallA
{
 font-size:9px;
}

On the onclick event for this anchor I also want to add something that will do this  "Find all the drop down list controls in this page" and add this style
.DropDownListsmallA
{
    height:14px;
}

Using Jquery or javascript.  Does someone can teach me how to find all the "Drop down list" in my page and set up a style to all of them?

Thank you
0
eddyperu
Asked:
eddyperu
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
If you set the class of the dropdown with DropDownListsmallA ( mean class="DropDownListsmallA"
you don't need anything else :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.DropDownListsmallA
{
	font-size:9px;
    height:14px;
}
</style>
</head>
<body>
<h1>With</h1>
<select class="DropDownListsmallA">
<option>OPTION1</option>
<option>OPTION2</option>
<option>OPTION3</option>
<option>OPTION4</option>
</select>
<h1>Without</h1>
<select>
<option>OPTION1</option>
<option>OPTION2</option>
<option>OPTION3</option>
<option>OPTION4</option>
</select>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
better :

select.DropDownListsmallA

instead :

.DropDownListsmallA
0
 
eddyperuAuthor Commented:
Thanks for the fast answer but all my site have many drop down list and I want to set them up in the onclick event instead of going one by one and adding a class.
Sorry  I am not trying to be difficult but there are many drop down list in my site....

1) I need a code that will go through the page DOM
2) Find all the Drop Down List
3) Add the same style to all drop Down list.(.DropDownListsmallA)

Thanks
Kind Regards,
eddy
0
 
leakim971PluritechnicianCommented:
Using :

var dd = document.getElementsByTagName("select");
for(var i =0;i<dd.length;i++) {
     dd[i].className = "DropDownListsmallA";
}

Open in new window


onclick event? OK, why not :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.DropDownListsmallA
{
	font-size:9px;
    height:14px;
}
</style>
<script language="javascript">
	function jdi() {
		var dd = document.getElementsByTagName("select");
		for(var i =0;i<dd.length;i++) {
			 dd[i].className = "DropDownListsmallA";
		}
	}
</script>
</head>
<body>
<input type="button" onclick="jdi();" value="change class of all comboboxes" />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
<select><option>OPTION1</option><option>OPTION2</option><option>OPTION3</option><option>OPTION4</option></select><br />
</body>
</html>

Open in new window

0
 
eddyperuAuthor Commented:
Thanks buddy!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now