JavaScript (jQuery)
function Panels() {}
Panels.prototype = {
init: function(select, panels, speed) {
$.extend(this, {select: $(select), panels: $(panels), speed: speed});
this.options = this.select.children('option');
var current = this;
this.select.change(function() { current.show(); });
this.panels.hide();
return this;
},
hide: function() {
this.panels.filter(':visible').slideUp(this.speed);
},
show: function() {
this.hide();
this.panels.filter(':eq(' + this.options.filter(':selected').val() + ')').slideDown(this.speed);
}
};
$(function() {
var myPanels = new Panels().init('#s', '#panels > li', 'slow').show();
});
XHTML:
<form action="">
<label for="s">Label:
<select id="s">
<option value="0" selected="selected">option1</option>
<option value="1">option2</option>
<option value="2">option3</option>
</select>
</label>
</form>
<ul id="panels">
<li>panel1</li>
<li>panel2</li>
<li>panel3</li>
</ul>
Вот такие вот страсти