<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
.color-selector {
margin: 10px;
}
.color-list, .color-list .color {
display: inline;
margin: 0;
padding: 0;
}
.color-list .color {
list-style: none;
padding: 4px;
color: #fff;
}
.color-list .red {
background-color: red;
}
.color-list .green {
background-color: green;
}
.color-list .blue {
background-color: blue;
}
.color-list .yellow {
color: #000;
background-color: yellow;
}
</style>
</head>
<body>
<div class="color-selector">
<ul class="color-list">
<li class="color red">red</li>
<li class="color green">green</li>
<li class="color blue">blue</li>
<li class="color yellow">yellow</li>
</ul>
<select>
<option value="none" selected>Choose a color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</div>
<div class="color-selector">
<ul class="color-list">
<li class="color red">red</li>
<li class="color green">green</li>
<li class="color blue">blue</li>
<li class="color yellow">yellow</li>
</ul>
<select>
<option value="red">Red</option>
<option value="green" selected>Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
(function () {
function ColorSelector(params) {
$.extend(this, params);
}
ColorSelector.prototype = {
constructor: ColorSelector,
root: null,
colorSel: ".color",
selectSel: "select",
notSelectedVal: "none",
_$colors: null,
_$select: null,
_findElements: function () {
this._$colors = $(this.colorSel, this.root);
this._$select = $(this.selectSel, this.root);
},
_initEvents: function () {
this._$select.change($.proxy(this._onChange, this));
},
_onChange: function () {
var value = this._$select.val();
this._$colors.hide();
if (value != this.notSelectedVal) {
this._$colors.filter("." + value).show();
}
},
init: function () {
this._findElements();
this._initEvents()
this._onChange();
}
};
$.fn.colorSelector = function (params) {
return this.each(function () {
new ColorSelector($.extend({root: this}, params)).init();
});
};
}());
$(".color-selector").colorSelector();
</script>
</body>
</html>