jQuery 已选择多个 Select
jQuery Chosen Multiple Select
是否可以在所选插件中设置所选值的不同背景颜色?
颜色应该取决于 class 或 attr 等。
该图显示了必须实现的目标。
$(".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 中删除了触发事件,并将 class 添加到外群。
只需将颜色名称添加到 class 它会自动设置为背景颜色。
是否可以在所选插件中设置所选值的不同背景颜色?
颜色应该取决于 class 或 attr 等。
该图显示了必须实现的目标。
$(".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 中删除了触发事件,并将 class 添加到外群。 只需将颜色名称添加到 class 它会自动设置为背景颜色。