Можно ли использовать разные цвета, когда пользователь выбирает один или несколько параметров в выбранном выборе?

Question

У меня есть HTML-выбор и использование Chosen JS-плагина для множественного выбора.

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

Есть ли какой-либо вариант в выбранном для этого, вместо того, чтобы использовать собственный код javascript? Я не вижу никакой информации об этом в документе.

Это пример, который я попробовал (только попробовать), но он не работает (конечно LOOL):

<select name="prueba" multiple class="form-control chosen-select"> 
         <option style="background-image: linear-gradient(to bottom, #CCC 0%, #CCC 0%);">option1</option> 
         <option style="background-image: linear-gradient(to bottom, #000 0%, #000 0%);">option2</option> 
        </select> 

Цвет не о положении, оно основано на одном свойстве модель и она будет назначена динамически

Answer 1

Я не думаю, что для этого есть собственный код.

Я думаю, вы должны попробовать написать пользовательский выбор (например, в раскрывающемся меню Bootstrap)

Answer 2

Это лучшее решение, которое я нашел:

... 
     $(selectName).on('change', function(evt, params) { 
      if(params.selected !== undefined){ 
       checkRelationAjax(selectName, urlContainer, sourceId, params.selected); 
      } 
     }); 
    ... 

/** 
* Call to the server to know if the selected element is related with the source id object 
* @param selectName HTML Select id selector #id 
* @param urlContainer HTML Input id where the url is stored 
* @param sourceId id of the source entity 
* @param id of the remote the check 
*/ 
function checkRelationAjax(selectName, urlContainer, sourceId, id){ 
    $.ajax({ 
     url: $(urlContainer).val(), 
     data: {local: sourceId, remote: id } 
    }).done(function(response) { 
     if(response.assigned != true){ 
       // The last search-choice is the last selected, so I change the css here 
       $(selectName + '_chosen .chosen-choices li.search-choice').last().addClass('no-bidirectional'); 
      } 
     }); 
    } 

Answer 3

Это работает для любого выбрали выберите с классом '.coloured-select-box', позволяя вам иметь несколько на странице и один обработчик

Вы также можете использовать функцию setColoursForSelectedOptions() для вызова после загрузки страницы и выбора с выбранными параметрами для окраски предварительно выбранного варианты после lo Объявление

добавить стиль столько, сколько вы хотите

.option-color-blue{ 
    background : #F00 !important; 
} 

добавить имя-данные свойства = «вариант цвета-синий» для выбора опций, которые вы хотите, чтобы цвет с соответствующим классом

добавить событие для обработки выбранного изменения для всех выбранных вами вариантов с классом .coloured-select-box

$('.coloured-select-box').chosen().change(function(){        
         var id = $(this).attr('id'); 
         //form the chosen name 
         var selName = id.replace(/-/g,'_');  
         selName = selName + '_chosen'; 
         //get the last chosen list item 
         var obj = $('#' + selName + ' li.search-choice:last'); 
         //get the index of the option from the chosen item 
         var index = $('#' + selName + ' li.search-choice:last a').data('option-array-index');   
         //get the option and data property from the actual select             
         var cssName = $('#' + id + ' option').eq(index).data('name');        
         //add the class 
         obj.addClass(cssName); 
        }); 


function setColoursForSelectedOptions(){ 
      var sels = $('.coloured-select-box'); 
      $.each(sels, function(indSel, objSel){ 
       var id = $(objSel).attr("id"); 
       var selName = id.replace(/-/g,'_');  
       selName = selName + '_chosen'; 
       var li = $('#' + selName + ' li.search-choice'); 
       $.each(li, function(indLi, objLi){ 
        var a = $(objLi).find('a'); 
        var index = $(a).data('option-array-index'); 
        var cssName = $('#' + id + ' option').eq(index).data('name');  
        $(objLi).addClass(cssName); 
       }); 
      }); 
     }