Добавить значок вниз для множественного выбора для selectedjs

Я немного борюсь с этим. Одиночный выбор для ChosenJs имеет стрелку раскрывающегося списка (которая исходит из свойства CSS фона на нем, если вы проверяете элемент), у множественного выбора нет.

У меня есть требование добавить выпадающий значок к множественному выбору. Я бы предпочел не манипулировать файлом CSS, который поставляется с ChosenJs. Я бы предпочел решение 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>

Насколько мне известно, вам нужно манипулировать CSS, и даже при одиночном выборе стрелка отображается по-разному в разных браузерах, поэтому, если вы управляете multi, вы, вероятно, захотите также изменить css для single.

— 25.07.2018 17:54

ну, я считаю, что selected на самом деле не использует выбор для множественного выбора, а вместо этого является типом ввода текста. вы можете запустить фрагмент кода и проверить элемент

— 25.07.2018 17:57

javascript jquery css jquery-chosen

25.07.2018 17:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

887

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

25.07.2018 18:12

Другие вопросы по теме

Результат Laravel selectize.js не отображается

Отключенный атрибут удаления JQuery не работает

WordPress jQuery работает только каждый раз с поиском по таблицам ниндзя

Разрешить ждать, когда придет сообщение

Измените все значки font awesome 5 с определенным классом на другой значок FA - JS / SVG

Использование переменной jQuery в качестве атрибута HTML

Javascript копировать (дублировать) текст из одного поля в другое

Как перебрать массив массива

Получение данных из SQL Server с помощью JQuery

Как мне сделать этот код javascript чище и лаконичнее? (мигающие цвета div)

Добавить значок вниз для множественного выбора для selectedjs

Ответы 1

Другие вопросы по теме

Похожие вопросы