Check if selected == selected

**unemployment** · Apr 25, 2011 07:00

I need to say... if selectedIndex == 'Registered Users' or if the user selects the second option, add a class.

Code JavaScript:

if (privacy_form)
	{
		var dob = document.getElementById('dob'); 
 
		if (dob.options[1])
		{
			addClass(dob, 'db');
		}
		else
		{
			removeClass(dob, 'db');
		}
	}

**RLM2008** · Apr 26, 2011 17:30

Is this a select options menu? You should be able to access the value by dob.value. If you have an eventlistener attached to the select menu then in your handler you can find the value with 'this.value'.

The type of event you want to look at is 'change' or for IE 'onchange'. In addition the type of thing you're looking for here is a toggle. i.e. if onchange happens on 'registered user' add the class. if onchange happens again on 'registered user' i.e. it's being deselected remove the class.

A little confused though you say add a class to the select menu? What's that class doing?

Anyway here's a couple of links. They are a little bit old, but I'm sure informative.

First is adding error message to fields
W3C DOM - Form error messages

The second which is probably more useful is an introduction to events
Javascript - Introduction to Events

Cheers

RLM

**RLM2008** · Apr 26, 2011 18:28

Here's a toggle function for you.

html

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Options</title>
<style type="text/css">
h1.clicked { background: red; }
</style>
</head>
<body>
<h1>Click here a few times</h1>
 
<script type="text/javascript">
 
var toggle = function(elem , className ) {
  // remove allows for multiple classNames and strips the appropriate spaces
  // e.g. removing class2 from 'class1 class2 class3'
  var remove = new RegExp ('\\s'+className+'|'+className+'\\s|'+className),
      match = new RegExp ('\\b'+className+'\\b'),
      currClass = elem.className;
 
  // does the element already have the class  
  if (match.test(currClass)) {
    elem.className = currClass.replace(remove, ''); // then remove class
  } else {
    elem.className += ' ' + className; // else add class
  }
}
// elementsByTagName returns an array. 
// Adding the index[0] selects the first one.
var headElem = document.getElementsByTagName('h1')[0];
headElem.onclick = function(){ toggle(headElem, 'clicked'); }; // clicked is the class name. See the CSS.
</script>
</body>
</html>

Javascript

Code JavaScript:

var toggle = function(elem , className ) {
 
  var remove = new RegExp ('\\s'+className+'|'+className+'\\s|'+className),
      match = new RegExp ('\\b'+className+'\\b'),
      currClass = elem.className;
 
  if (match.test(currClass)) {
    elem.className = currClass.replace(remove, '');
  } else {
    elem.className += ' ' + className;
  }
};

**paul_wilkins** · Apr 26, 2011 20:37

Here's a link to some hasClass(), addClass() and removeClass() functions that can be very useful.
addClass, removeClass, hasClass - JavaScript - Snipplr Social Snippet Repository

In addition to those, I like to add a toggleClass() function too.

Code javascript:

function toggleClass(ele, cls) {
    if (hasClass(ele, cls)) {
        removeClass(ele, cls);
    } else {
        addClass(ele, cls);
    }
}

Or, if you like things a bit more compact:

Code javascript:

function toggleClass(ele, cls) {
    hasClass(ele, cls) ? removeClass(ele, cls) : addClass(ele, cls);
}

**RLM2008** · Apr 26, 2011 21:02

or that indeed.

the only thing with that regex it doesn't remove the trailing space, so you get an extra space each time it's added. not a biggy I guess.

Code JavaScript:

var strg = 'class1 class2 class3';
 
function remove(className){
  match = new RegExp('(\\s|^)'+className+'(\\s|$)');
  strg = strg.replace(match, ' ');
} 
 
function add(className){
  strg += ' ' + className; 
}   
 
for (var i = 0; i < 10; i += 1){
  remove('class3');
  add('class3');
}
 
console.log(strg); //class1 class2          class3

**paul_wilkins** · Apr 26, 2011 21:20

Can that be remedied by matching one or more spaces?

Code javascript:

match = new RegExp('(\\s*|^)'+className+'(\\s*|$)');

**RLM2008** · Apr 26, 2011 21:28

That will do

User Tag List

Thread: Check if selected == selected

Thread Tools

Display

Check if selected == selected

Bookmarks

Bookmarks

Posting Permissions