<div class="box">
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1"></option>
<option data-color="red" value="2">2</option>
<option selected="selected" data-color="yellow" value="3">3</option>
<option data-color="" value="4" disabled>4</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select><select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select><select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select><select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
<select class="colorSelect">
<option value="">請選擇</option>
<option data-color="#ccc" value="1">1</option>
<option selected="selected" data-color="#ff00ff" value="2">2</option>
<option data-color="#ff0000" value="3">3</option>
<option data-color="四輪123112313123" value="4" disabled>24吋 已售完</option>
</select>
</div>
.box {
margin-left: 20%;
margin-top : 5%;
}
.btn-hack {
width: 85px;
}
.btn-hack > .caret {
margin-top: 7px;
float: right;
}
@@-moz-document url-prefix() {
.caret {
margin-left: 10px !important;
margin-top: -10px !important;
float: right;
}
}
.colorOption {
float: left;
width: 12px;
height: 12px;
display: inline-block;
margin-right: 5px;
margin-top: 4px;
}
.saleOutColor {
pointer-events: none;
background-color: #ccc !important;
}
.saleOutColor > a:hover {
background-color: #ccc !important;
}
.colorBorder {
border: 2px solid #dedede;
}
.colorBox {
background-color: #ccc;
}
.colorFixed {
margin-top: 3px !important;
}
.colorNameFixed {
width: 40px;
height: 14px;
overflow: hidden;
margin-left: -8px;
}
.colorName {
display: inline-block;
margin-right: 10px;
}
(function( $ ) {
$.fn.colorSelect = function() {
var selectCount = 0;
return this.each(function() {
// init
var re = /^#[0-9A-Fa-f]{1,6}$/;
var selectObj = {};
var selectInfo = {};
var options = [];
var ele = $( this )
var data = ele.children('option');
var optionsLen = data.length;
var selectorId = "selectorId_"+selectCount;
selectCount++;
// hide select
$(this).hide();
$(this).attr("data-selectorIndex", selectorId);
// get all datas from select and create a optionObj
for(var optionIndex = 0; optionIndex < optionsLen; optionIndex++ ) {
var that = $(data[optionIndex]);
var _color = (!!that.attr("data-color"))?that.attr("data-color"):"";
var name = that.text();
if(!re.test(_color)) {
name = (!!_color) ? name + " - " + _color : name;
_color = "";
}
var optionObj = {
"name": name,
"value": that.val(),
"color": (!!_color)?_color:"'rgba(0, 0, 0, 0)'",
"disabled": that.prop('disabled'),
"selected": that.prop('selected')
}
if(optionObj.selected) {
selectObj = optionObj
}
options.push(optionObj);
}
// create select element by div
var mainDiv = $('<div class="btn-group" data-selectorIndex="'+selectorId+'"></div>');
var button = $("<button class='btn btn-default btn-xs btn-hack dropdown-toggle' type='button' data-toggle='dropdown'>");
selectInfo = $('<span class="colorOption colorFixed" style="background-color:'+selectObj.color+
'"></span><span class="colorName colorNameFixed">'+selectObj.name+'</span><span class="caret"></span>')
button.append(selectInfo);
var dropdownMenu = $('<ul class="dropdown-menu"></ul>');
var li = [];
for(var liIndex = 0;liIndex < options.length; liIndex++) {
var isColor = (options[liIndex].color !== "" && options[liIndex].color !== 'rgba(0, 0, 0, 0)')?true:false;
var li = $("<li></li>");
li.attr("selectValue", options[liIndex].value);
var alink = $('<a href="#" onclick="return false;"></a>');
var spanData = "";
if(isColor) {
spanData = $('<span class="colorOption colorBorder" style="background-color:'+options[liIndex].color+
'"></span><span class="colorName">'+options[liIndex].name+'</span>');
} else {
spanData = $('<span class="colorOption"' +
'></span><span class="colorName">'+options[liIndex].name+'</span>');
}
alink.append(spanData);
li.append(alink);
if(!options[liIndex].disabled) {
// li event
li.click(function() {
var li_t = this;
var color = $(li_t).children('a').find('.colorOption').css("background-color");
var name = $(li_t).children('a').find('span[class=colorName]').text();
$(li_t).parent().find("li").css("background-color", "rgba(0,0,0,0)");
$(li_t).css("background-color", "rgba(255,255,0,.2)");
var updateSelect = $(li_t).parent().parent()[0];
var button = $(updateSelect).find('button');
// update view
$(button).find('.colorOption').css("background-color", color);
$(button).find('.colorName').text(name);
$(button).find('.colorName').text(name);
if (color === 'rgba(0, 0, 0, 0)') {
$(button).find('.colorOption').removeClass('colorBorder');
} else {
$(button).find('.colorOption').addClass('colorBorder')
}
// update select
var li_parent = $(li_t).parent().parent();
var findSelectId = li_parent.attr("data-selectorIndex");
var selectValue = $(li_t).attr('selectValue');
var targetSelect = li_parent.siblings('select[data-selectorIndex='+findSelectId+']');
targetSelect.val(selectValue);
});
} else {
li.addClass("saleOutColor");
}
// init selected
if(options[liIndex].selected) {
$(li).css("background-color", "rgba(255,255,0,.2)");
}
dropdownMenu.append(li);
}
mainDiv.append(button);
mainDiv.append(dropdownMenu);
ele.parent().append(mainDiv);
});
};
}( jQuery ));
$( ".colorSelect" ).colorSelect();
