如何覆蓋.select2結果.select2 - 突出顯示的顏色

Question

我已經使用了select2插件。我有兩個選擇輸入框。我需要兩個不同的突出顯示的顏色。任何人都可以告訴我解決方案如何覆蓋突出顯示的顏色？

Answer 1

如果你有兩個不同的選擇對象，是很簡單的：

$(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; 
} 

編輯：

原來選擇2追加創建建議框到文檔主體，而不是它自己的select元素。一個選擇可以放置一個父容器內的選擇和使用傳中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

Answer 2

如果有人發現了這個問題，並遇到了麻煩select2-results__option select2-results__option--highlighted { background-color }從默認藍色變爲（＃5897fb），請確保您不包括你的css代碼包含你的select2的元素。原因如第一個答案中所述：

原來，select2將創建的建議框追加到文檔主體，而不是select元素本身。