blognote-info.com

Alors je savais pas trop comment appeler ce billet mais c'est un titre qui ira bien !

Comment simplement faire en sorte qu'un element html Select affiche ou désaffiche des parties d'une page en fonction des valeurs qu'il contient ? C'est ça la question que je me suis posé ce matin et voici une réponse :

Le but étant de s'en servir comme ça :

Switches.registerNew('monIdSelect',
	new SwitchOption('maValeur', 'monIdSwitch'),
	new SwitchOption('maValeur2', 'monIdSwitch2')
);
Switches.registerNew('truc',
	new SwitchOption('test', 'monId')
);
Switches.apply();

per exemple !

Donc on va créer notre object SwitchOption qui est rudimentaire mais qui comporte quelques petites options sympa :

var SwitchOption = function(value, toSwitch) {
	this._init(value, toSwitch);
}
SwitchOption.prototype._init = function(value, toSwitch) {
	this.value = value;
	this.toSwitch = toSwitch;
}
SwitchOption.prototype.getValue = function() {
	return this.value;
}
SwitchOption.prototype.getSwitch = function() {
	return this.toSwitch;
}
SwitchOption.prototype.getFocusedElement = function() {
	return document.getElementById(this.toSwitch);
}
SwitchOption.prototype.toString = function() {
	return "[SwitchOption "+this.value+", "+this.toSwitch+"]";
}

Voila ... Ensuite on va définir notre namespace Switches qui va contenir les fonctions statiques permettant de faire ce qu'on veut. Alors c'est un peu lourdingue mais j'essaye de vérifier un peu toutes les petites choses qui peutvent poser problème quand on associe ce javascript à du html qu'on ne connait pas !

var Switches = {
 
	list : {},
	
	registerNew : function () {
		var idSelect = arguments[0];
		if (document.getElementById(idSelect)) {
			var options = new Array();
			for (i=1; i < arguments.length; i++) {
				if (arguments[i].getFocusedElement()) {
					options.push(arguments[i]);
				}
			}
			if (options.length) {
				this.list[idSelect] = options;
			}
		}
	},
 
	apply : function() {
		var select;
		for (selectId in this.list) {
			Switches.hideAll(selectId);
 
			select = document.getElementById(selectId);
			if (select) {
				select.onchange = function(event) {
					Switches.changed(this);
				}
			}
 
			Switches.changed(document.getElementById(selectId));
		}
	},
 
	changed : function (source) {
		var id = source.id;
		if (id in this.list) {
			Switches.hideAll(id);
 
			var options = Switches.list[id];
			var element;
			var found = false;
			for (i=0; i < options.length; i++) {
				option = options[i];
				if (option.getValue() == source.value) {
					found = true;
					element = option.getFocusedElement();
					if (element) {
						element.value = "";
						element.style.display = 'block';
					}
				}
			}
		} 
	},
 
	hideAll : function(id) {
		var options = Switches.list[id];
		var option;
		for (i=0; i<options.length; i++) {
			option = options[i];
			option.getFocusedElement().style.display = 'none';
		}
	},
 
	toString : function () {
		var ret = "";
		for (select in this.list) {
			ret += select + ' => ' + this.list[select].toString() + "\n";
		}
		return ret;
	}
 
}

Donc le registerNew vérifie qu'on a bien ce qu'on attend, le apply va modifier les select pour que la fonction onchange pointe vers la fonction Switches.changed qui elle gère l'évenement ainsi que son action.

Donc c'est simplicime mais voici un petit code html d'exemple pour illustrer :

<select id="monIdSelect">
	<option value="maValeur3">3</option>
	<option value="maValeur4">4</option>
	<option value="maValeur">1</option>
	<option value="maValeur2">2</option>
</select>
 
<br />
 
<input type="text" id="monIdSwitch" /><br />
<input type="text" id="monIdSwitch2" />
 
<br />
 
<select id="truc">
	<option value="test">test</option>
	<option value="trucmuch">trucmuch</option>
</select>
 
<br />
 
<input type="text" id="monId" /><br />
 
<script type="text/javascript" src="test.js"></script>

Et voila si ça peu aider quelqu'un =)