2

I have a HTML select, and using the Chosen JS plugin, for multiple select.

Chosen uses the CSS property background-image and others to set the style for each select option (always the same style). Buy I would like to set each option with its own color when selected.

Is there any option in chosen for that instead of using an own javascript code? I can't see any information about this at the doc.

This is an example I tried (just to try) but it didn't work (of course 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>

The color is not about the position, it is based in a property of the model and it will be assigned dynamically

quindimildev
  • 1,280
  • 8
  • 21

3 Answers3

0

I don't think there is a native code to do that.

I think you should try to write a custom select (like dropdown menu of Bootstrap)

p0k3
  • 333
  • 5
  • 23
  • Exactly, and there is here an answer which explain it well : select options are rendered by the browser : not by the CSS. http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select Just like the scrollbar, etc ... – Alex Nov 24 '15 at 14:18
  • I know I can't change the color in a classic HTML select but the chosen plugin generates a html structure, where the option selected is been transform into a span with its css properties. I could create a javascript code which changes these properties after rendering, but don't know if there is a plugin or a native code for that. Or if there are some chosen events to control if an element is selected – quindimildev Nov 24 '15 at 14:26
0

This is the best solution I have found:

...
        $(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');
            }
        });
    }
quindimildev
  • 1,280
  • 8
  • 21
0

This works for any chosen select with a class of '.coloured-select-box', allowing you to have multiple on the page and one handler

You can also use the setColoursForSelectedOptions() function to call after the loading of page and selects with selected options to colour the preselected options after load

add style as many as you want

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

add property data-name="option-color-blue" to the select options you want to colour with the relevant class

add event to handle selected change on all chosen selects with class .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);
                });
            });
        }
tedbaker
  • 31
  • 7