Question

我一直在为此苦苦挣扎。 ChosenJs的单选具有下拉箭头（如果您检查元素，则来自其背景CSS属性），而多选则没有。

我需要将下拉图标添加到多选中。我希望不要处理ChosenJs随附的CSS文件。我希望使用jQuery / Javascript解决方案，但似乎不太了解。

$('.chosen-select').chosen({

}).change(function(obj, result) {

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<div>
  <p>
    no html down icon on multi select
  </p>
  <select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
  <p>
    html down icon on single select
  </p>

  <select data-placeholder="Choose a Country..." class="chosen-select" style="width: 350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
</div>

Answer 1

一些很棒的字体，一些jQuery和Viola！

$('.chosen-select').chosen({

}).change(function(obj, result) {

});

$('<li><i class="fa fa-angle-down" /></li>').css({position: "absolute", right: "10px", top: "5px" }).appendTo('ul.chosen-choices');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <p>
    no html down icon on multi select
  </p>
  <select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
  <p>
    html down icon on single select
  </p>

  <select data-placeholder="Choose a Country..." class="chosen-select" style="width: 350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
</div>

将图标添加到多选selectedjs

1 个答案: