Add Class to DropDown

[unemployment]

Basically I have a dropdown that appears on hover.  When it an category in the dropdown is selected I want to add a class.  When another item in the list is selected I want to remove the previous class and add the same class to the new dropdown item.

 

I know this doesn't work, but am I on the right track?

var drop_selected = document.getElementsByName('search_catergory');
drop_selected.onchange = function(){
	drop_selected.setAttribute("class", "drop_selected");
}

 

HTML below:

 

<form action="search.php" method="get">
				<div class="search">
					<div class="searchArrowHover">
						<div class="arrUp"></div>
						<dl>
							<dt></dt>
							<dd name="search_category"><a href="/">All</a></dd>  
							<dd name="search_category"><a href="/">People</a></dd>    
							<dd name="search_category"><a href="/">Companies</a></dd>
							<dd name="search_category" class="last"><a href="/">Inbox</a></dd>
						</dl>
					</div>
						<input type="text" size="25" name="search" id="searchInputBox" value="Search" />
						<input type="image" name="submit" src="/assets/img/search.png" />
				</div>
			</form> 

[.josh]

first off, in your getElementsByName(..) you typoed your name...but anyways, getElementsByName() returns an array of all elements that match the specified name.  So you need to loop through it, something like this:

 

var drop_selected = document.getElementsByName('search_category');
  for (var x in drop_selected) {
    drop_selected[x].onchange = function(){
      this.setAttribute("class", "drop_selected");
    }
  }

[unemployment]

first off, in your getElementsByName(..) you typoed your name...but anyways, getElementsByName() returns an array of all elements that match the specified name.  So you need to loop through it, something like this:

 

var drop_selected = document.getElementsByName('search_category');
  for (var x in drop_selected) {
    drop_selected[x].onchange = function(){
      this.setAttribute("class", "drop_selected");
    }
  }

 

I tried your code and it didn't work.  I didn't get any errors in firebug, but it just wasn't adding the class when I would click on a selection.

[.josh]

okay well "click on" is not the same as "on change".  I kinda had my doubts about it, seeing as how that's not a select tag, but I assumed you knew what you were doing with that .onchange.  You will want to change .onchange to .onclick

[unemployment]

okay well "click on" is not the same as "on change".  I kinda had my doubts about it, seeing as how that's not a select tag, but I assumed you knew what you were doing with that .onchange.  You will want to change .onchange to .onclick

 

Ok well I got it working, but it doesn't act as a toggle.  Right now it just adds a class to each list item when it is selected, but how do I tell it to remove the previous class added so that only one list item has the class added at a time?

[.josh]

If I show you how to do that, are you just gonna come back again and say "Oh but what, there's yet another thing I didn't bother to mention before?"

[unemployment]

If I show you how to do that, are you just gonna come back again and say "Oh but what, there's yet another thing I didn't bother to mention before?"

 

Ha well I can't say that i'll never post again in the forum, but I will say that it should be the last thing I need done on this dropdown.  If you don't want to show me, just give me some sense of guidance and I can try to work through it.  I tried using a for loop but that failed on me. 

[unemployment]

If I show you how to do that, are you just gonna come back again and say "Oh but what, there's yet another thing I didn't bother to mention before?"

 

Ha well I can't say that i'll never post again in the forum, but I will say that it should be the last thing I need done on this dropdown.  If you don't want to show me, just give me some sense of guidance and I can try to work through it.  I tried using a for loop but that failed on me.

 

Actually yes, there is one more thing.  How do I set the first list item to default to selected? I  imagine that I set the class in the html and then once the js kicks in it would remove all the class and add the class to the selected item.

[.josh]

There is probably a more elegant way to do this (maybe along the lines of keeping track of the last clicked object and removing the class, instead of looping through all of them like I did), but this works:

 

var drop_selected = document.getElementsByName('search_category');
for (var x in drop_selected) {
  drop_selected[x].onclick = function(){
    for (var c=0; c<drop_selected.length; c++) { 
      drop_selected[c].setAttribute("class", ""); 
    }
    this.setAttribute("class", "drop_selected");
  }
}

 

And yes, you would just hardcode the first one with class="drop_selected" for the default

[unemployment]

There is probably a more elegant way to do this (maybe along the lines of keeping track of the last clicked object and removing the class, instead of looping through all of them like I did), but this works:

 

var drop_selected = document.getElementsByName('search_category');
for (var x in drop_selected) {
  drop_selected[x].onclick = function(){
    for (var c=0; c<drop_selected.length; c++) { 
      drop_selected[c].setAttribute("class", ""); 
    }
    this.setAttribute("class", "drop_selected");
  }
}

 

And yes, you would just hardcode the first one with class="drop_selected" for the default

 

Any idea why my return falses aren't working.  I needed to add them so that the page wouldn't refresh.

var drop_selected = document.getElementsByName('search_category');
for (var x in drop_selected) {
	drop_selected[x].onclick = function(){
		or (var c=0; c<drop_selected.length; c++) { 
			drop_selected[c].setAttribute("class", ""); 
			return false;
		}
		this.setAttribute("class", "drop_selected");
		return false;
	}
}

[.josh]

removing the first one *should* do it.  But anyways, seeing as how you aren't wanting the page to refresh, why are you wrapping them in anchor tags to begin with? My first suggestion for you would be to remove the anchor tags.  If you're looking to make them look like links in general, then style the dd tags to make it look like it (add underline, :hover attrib, etc...)

[unemployment]

removing the first one *should* do it.  But anyways, seeing as how you aren't wanting the page to refresh, why are you wrapping them in anchor tags to begin with? My first suggestion for you would be to remove the anchor tags.  If you're looking to make them look like links in general, then style the dd tags to make it look like it (add underline, :hover attrib, etc...)

 

I removed the first false and it fails.  I am going to be using the anchor tags as a backup if someone doesn't have JS enabled.  Do you have any other suggestions?

[.josh]

okay well it worked just fine for me .... for reference, this is what I am working with:

 

<form action="search.php" method="get">
               <div class="search">
                  <div class="searchArrowHover">
                     <div class="arrUp"></div>
                     <dl>
                        <dt></dt>
                        <dd name="search_category"><a href="/">All</a></dd> 
                        <dd name="search_category"><a href="/">People</a></dd>   
                        <dd name="search_category"><a href="/">Companies</a></dd>
                        <dd name="search_category" class="last"><a href="/">Inbox</a></dd>
                     </dl>
                  </div>
                     <input type="text" size="25" name="search" id="searchInputBox" value="Search" />
                     <input type="image" name="submit" src="/assets/img/search.png" />
               </div>
            </form> 
<script type='text/javascript'>
var drop_selected = document.getElementsByName('search_category');
for (var x in drop_selected) {
  drop_selected[x].onclick = function(){
    for (var c=0; c<drop_selected.length; c++) { 
      drop_selected[c].setAttribute("class", ""); 
    }
    this.setAttribute("class", "drop_selected");
    return false;
  }
}
</script>

 

When I click on a link, page is not refreshed, and I see class for previous one being removed from previous and class being added on the one that was clicked.

 

 

[unemployment]

I got it to work perfectly.  Thank you.  I hope you got my PM.  I didn't get a response.