代码之家 › 专栏 › 技术社区 › Bryan Dellinger

将图标添加到chosenjs的多选

jquery-chosen css jquery javascript

Bryan Dellinger · 技术社区 · 6 年前

我已经挣扎了一段时间了。ChosenJs的单个select有一个下拉箭头(如果您检查元素,它来自它的background CSS属性),而multiselect没有。

我需要将下拉图标添加到multiselect。我不想操纵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>

1 回复 | 直到 6 年前

acarlstein ironhide96 6 年前

有点字体很棒,一些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>