jQuery選擇多選

Question

是否可以在所選插件中設置所選值的不同背景顏色？ 顏色應該取決於類或屬性等。圖像顯示了必須實現的目標。

Answer 1

 $(".chosen-select").chosen(); $(".chosen-select").on('change', function (event,el) { var selected_element = $(".chosen-select option:contains("+el.selected+")"); var selected_value = selected_element.val(); var parent_optgroup = selected_element.closest('optgroup').attr('label'); var parent_optgroup_class = selected_element.closest('optgroup').attr('class'); $(".search-choice:last > span").css("background-color", parent_optgroup_class); selected_element.text(parent_optgroup+' - '+selected_value); //$(selected_element).addClass(`${parent_optgroup_class}`); });

 <link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script> <select multiple data-placeholder="example" style="width:350px;" class="chosen-select" tabindex="5"> <option value=""></option> <optgroup label="NFC EAST" class="red"> <option>Dallas Cowboys</option> <option>New York Giants</option> <option>Philadelphia Eagles</option> <option>Washington Redskins</option> </optgroup> <optgroup label="NFC NORTH" class="blue"> <option>Chicago Bears</option> <option>Detroit Lions</option> <option>Green Bay Packers</option> <option>Minnesota Vikings</option> </optgroup> <optgroup label="NFC SOUTH" class="green"> <option>Atlanta Falcons</option> <option>Carolina Panthers</option> <option>New Orleans Saints</option> <option>Tampa Bay Buccaneers</option> </optgroup> </select>

我已經從selected_element.text 中刪除了觸發事件並將類添加到外組。 只需將顏色名稱添加到它會自動設置為背景顏色的類中。