实现select标签不通过ctrl实现多选，通过点击实现多选

效果如下

$(function() {
var values = [];
var htmls = [];
var lv = '';
var lh = '';
// 右往左
$("#src-color").on('click', 'option', function() {


if($(this).is('.vm')){
$(this).removeClass('vm')
}else{
$(this).addClass('vm')
}
for(var i = 0; i <= $("#src-color>option").length - 1; i++) {
if($("#src-color>option").eq(i).is('.vm')) {
values.push($("#src-color>option").eq(i).attr('value'));
htmls.push($("#src-color>option").eq(i).html());
}

}
lv = values;
lh = htmls
console.log(htmls)
values = [];
htmls = [];
console.log(lv + lh)

});

$('#btn-sel').on('click', function() {
var h = null;
$("#src-color option.vm").remove();
for(var j = 0; j <= lv.length - 1; j++) {
if(h == undefined) {
h = '' + lh[j] + ''
} else {
h += '' + lh[j] + ''
}
}
// 删除原有元素
//
// 新数组赋值
$('#tar-color').append(h);
console.log($("#tar-color option").length)
h = null;
lv = '';
lh = '';

});
// 左往右
//
var value2 = [];
var html2 = [];
var rv = '';
var rh = '';
$("#tar-color").on('click', 'option', function() {
if($(this).is('.vm')){
$(this).removeClass('vm')
}else{
$(this).addClass('vm')
}
for(var i = 0; i <= $("#tar-color>option").length - 1; i++) {
if($("#tar-color>option").eq(i).is('.vm')) {
value2.push($("#tar-color>option").eq(i).attr('value'));
html2.push($("#tar-color>option").eq(i).html());
}

}
rv = value2;
rh = html2
value2 = [];
html2 = [];
console.log(rv + rh);

});

$('#btn-back').on('click', function() {
var h = null;
$("#tar-color option.vm").remove();
for(var j = 0; j <= rv.length - 1; j++) {
if(h == undefined) {
h = '' + rh[j] + ''
} else {
h += '' + rh[j] + ''
}
}
// 删除原有元素


console.log($("#tar-color").html())
// 新数组赋值
$('#src-color').append(h);
h = null;
rv = '';
rh = '';
console.log(h)
});