jQuery选择多选答案

【问题标题】：jQuery Chosen Multiple SelectjQuery选择多选
【发布时间】：2020-02-11 09:58:02
【问题描述】：

是否可以在所选插件中设置所选值的不同背景颜色？颜色应该取决于类或属性等。该图显示了必须实现的目标。

【问题讨论】：

是的。分享插件的代码/jsfiddle。
@OfirBaruch jsfiddle.net/PrHDH/260
希望有解决办法：)
到目前为止，所选 js 不支持模板功能，但它可用于 select2 js。请尝试一下

标签： javascript jquery html css jquery-chosen

【解决方案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 中删除了触发事件并将类添加到外组。只需将颜色名称添加到它会自动设置为背景颜色的类。

【讨论】：