Question

我试图解决此错误（仅在Chrome上运行正常）。这是将select转换为选择器选项的脚本：

jQuery.fn.select2OptionPicker = function(options) {
    return this.each(function() {
            var $ = jQuery;
            var select = $(this);
            var multiselect = select.attr('multiple');
            select.hide();

            var buttonsHtml = $('<div class="d2s"></div>');
            var selectIndex = 0;
            var addOptGroup = function(optGroup) {
                    if (optGroup.attr('label')) {
                            buttonsHtml.append('<strong>' + optGroup.attr('label') + '</strong>');
                    }
                    var ulHtml = $('<ul>');
                    optGroup.children('option').each(function() {
                            var img_src = $(this).data('img-src');
                            var color = $(this).data('color');

                            var liHtml = $('<li></li>');
                            if ($(this).attr('disabled') || select.attr('disabled')) {
                                    liHtml.addClass('disabled');
                                    liHtml.append('<span>' + $(this).html() + '</span>');
                            } else {

                                    if (color) {
                                            liHtml.append('<a href="#" style="background-color:' + color + '" data-select-index="' + selectIndex + '">&nbsp;</a>');
                                    } else if (img_src) {
                                            liHtml.append('<a href="#" data-select-index="' + selectIndex + '"><img class="image_picker" src="' + img_src + '"></a>');
                                    } else {
                                            liHtml.append('<a href="#" data-select-index="' + selectIndex + '">' + $(this).html() + '</a>');
                                    }
                            }

                            // Mark current selection as "picked"
                            if ((!options || !options.noDefault) && $(this).attr('selected')) {
                                    liHtml.children('a, span').addClass('picked');
                            }
                            ulHtml.append(liHtml);
                            selectIndex++;
                    });
                    buttonsHtml.append(ulHtml);
            }

            var optGroups = select.children('optgroup');
            if (optGroups.length == 0) {
                    addOptGroup(select);
            } else {
                    optGroups.each(function() {
                            addOptGroup($(this));
                    });
            }

            select.after(buttonsHtml);

            buttonsHtml.find('a').click(function(e) {
                    e.preventDefault();
                    var clickedOption = $(select.find('option')[$(this).attr('data-select-index')]);
                    if (multiselect) {
                            if (clickedOption.attr('selected')) {
                                    $(this).removeClass('picked');
                                    clickedOption.removeAttr('selected');
                            } else {
                                    $(this).addClass('picked');
                                    clickedOption.attr('selected', 'selected');
                            }
                    } else {
                            if ($(this).hasClass('picked')) {
                                    //$(this).removeClass('picked');
                                    //clickedOption.removeAttr('selected');
                            } else {
                                    buttonsHtml.find('a, span').removeClass('picked');
                                    $(this).addClass('picked');
                                    clickedOption.attr('selected', 'selected');
                            }
                    }

                        select.trigger('change');
                });
        });
};

$('.js-d2s').select2OptionPicker();

$('#showdropdown').change(function() {
        $('.js-d2s').toggle();

});

在这里你可以找到行动：
http://goo.gl/0ggfkK

（这笔不是我的，但我在以下插件中遇到了同样的问题：http://www.jqueryscript.net/form/jQuery-Plugin-To-Convert-Select-List-To-A-Option-Picker.html）

我使用此插件将select转换为选项选择器，但我发现了一个我无法解决的错误。如果你显示下拉菜单，你可以看到它。如果您选择房间2，房间3等下拉列表也会更新，但如果您再次单击房间2（已单击一个按钮/已选择一个选项），其值将不会更新。简而言之，只有未选择的选项可以刷新值并传递正确的变量。你觉得怎么样？

jQuery转换select到picker选项

0 个答案: