Если у вас есть два разных объекта выбора, это довольно просто:
$(document).ready(function() {
$(".select-1").select2();
$(".select-2").select2();
});
то в вашем css выполните:
.select-1 select2-results__option select2-results__option--highlighted {
background: #5897fb;
}
.select-2 select2-results__option select2-results__option--highlighted {
background: #6d6d6d;
}
Редактировать:
Оказывается, select2 добавляет созданное поле предложения в тело документа, а не элемент select it self. Один из вариантов может состоять в том, чтобы поместить выборки внутри родительского контейнера и использовать проход в опции dropdownParent для конструктора:
$("#menuOption1").select2({dropdownParent: "#menuOption1-container"});
Таким образом, вы получите что-то вроде этого:
Разметка:
<span id="menuOption1-container">
<select id="menuOption1">
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
</select>
</span>
<span id="menuOption2-container">
<select id="menuOption2">
<option value="a"> Vowel a </option>
<option value="e"> Vowel e </option>
<option value="i"> Vowel i </option>
<option value="o"> Vowel o </option>
<option value="o"> Vowel u </option>
</select>
</span>
JQuery:
$(document).ready(function() {
$("#menuOption1").select2({dropdownParent: "#menuOption1-container"});
$("#menuOption2").select2({dropdownParent: "#menuOption2-container"});
});
и, наконец, Css:
#menuOption1-container .select2-results__option--highlighted {
background-color: #50831F !important;
}
#menuOption2-container .select2-results__option--highlighted {
background-color: #28915F !important;
}
Вот живой пример:
jsfiddle