Question

我有一个HTML选择，并使用Chosen JS插件进行多次选择。

Chosen使用CSS属性background-image和其他设置为每个选择选项设置样式（总是相同的样式）。购买我想在选中时为每个选项设置自己的颜色。

是否有选择的选项而不是使用自己的javascript代码？我在doc上看不到有关此内容的任何信息。

这是我尝试的一个例子（只是为了尝试），但它没有用（当然是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（）函数在加载页面后调用，并选择选定的选项以在加载后为预选选项着色

根据需要添加样式

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

将属性data-name =“option-color-blue”添加到要使用相关类着色的选项中

使用类.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);
                });
            });
        }

当用户在所选择的选择中选择一个或多个选项时，是否可以使用不同的颜色？

3 个答案: