Question

    // selectbox
    $(function() {
    function selectbox(widgetSelector, optionsContainerSelector, optionsSelector, selectedOptionSelector, selectedOptionClassName, selectorClassName) {
        var target = widgetSelector;


        function initialize() {
            var widget = $(this);
            var selectboxNamespace = widget.data('selectbox-ns');
            var options = optionsContainerSelector; // The container which contains the options 
            var option = optionsSelector; // The options nested directly inside the options container
            var selected = selectedOptionSelector; // This is the selector you will style, no visible at all times portion of the selectbox
            var selectedOption = selectedOptionClassName; // This class is mechanical but be used to allow the user to visually track the item which is selected once the placeholder pops back into the selected region 
            var selector = selectorClassName; // Set the selector switch to a local var for reuse
            function closeAllOptions(event) { // For blurring and defocus of any intances of  the selectbox widget
                // This portion is for reseting the placeholder or selection text (depending if an items has indeed been selected yet)
                $(options).hide(); // Hide all intances of the options container
                $(target).children().children(selected).each(function(){ // Iterate through each one 
                    $(this).html( $(this).parent().parent().children(options).children('.'+selectedOption).html() )
                    // Set each instance of the selected class innerHTML to that of the selectedOption class if one has been selected 
                });
            }
            function closeOptions(event) {
                $(options).hide();

                // When the an item is selected, we'll close all instances the options container
            }
            function injectPlaceholder() {
                // We will use this again below (2) times
                widget.children().children(selected).html(widget.children().children(selected).data('placeholder'));
            }
            injectPlaceholder(); // Ensure the initial content is where it should be on load
            function toggleOptions(event) {
                // this = .options
                if (widget.children(options).is(':visible')) { // If selectbox is opened
                    widget.children(options).hide(); // Hide the options based on where the function was envoked from
                    widget.children().children(selected).html(widget.children(options).children('.' + selectedOption).html())
                } else { // if selectbox is closed
                    $(options).hide() // Hide all options (all instances)
                    widget.children(options).show(); // Show this particular instance
                    injectPlaceholder(); // Another time where injectPlaceholder is envoked()
                }
                event.stopPropagation(); // Stop the event from bubbling up the DOM further
            }

            function selectOption(event) { // Selecting an option from the now visible options container
                // this = .option
                var reqOption = $(this).html(); // Store the option content that was selected
                var reqData = $(this).attr('data-value'); // Store the value held by the option selected
                widget.children(options).children(option).removeClass(selectedOption) // This class is mechanical but be used to allow the user to visually track the item which is selected once the placeholder pops back into the selected region 
                $(this).addClass(selectedOption); // for tracking purposes
                widget.children().children(selected).html(reqOption) // Insert the selected options data into the 'selected'/selection area
                widget.children().children(selected).attr('data-value', reqData) // Append a data-attribute matching the value of the option selected
                $('.test-box').append(selectboxNamespace + ' was selected and ' + 'reports its selected value: ' + reqData + ',' + ' because the user selected the option reading: ' + '"' + reqOption + '"<br />');
                event.stopPropagation(); // Stop the event from bubbling up the DOM
                 closeOptions(); // Close options after an item is selected and the rest is done...
            }
            // Bind our event handlers
            $(this).on('click', option, selectOption) // If an option is clicked -> selectOption()
            $(this).on('click', toggleOptions) // If the options container is clicked -> toggleOption()
            $(this).on('click', selector, toggleOptions) // If the selector element is clicked -> toggleOptions()
            $('html').on('click', closeAllOptions) // If the  widget is blurred/defocused -> closeAllOptions
        }

        $(target).each(initialize) // Apply this functionality to each instance of the select box
    }
    window.selectbox = selectbox('.selectbox', '.options', '.option', '.selected', 'selected-option', '.selector');
    // API : widgetSelector, optionsContainerSelector, optionsSelector, selectedOptionSelector, selectedOptionClassName, selectorClassName ) The last param must be a class name (any classname)
    });

以下是我设法满足的小部件要求：

如果未通过所有状态选择任何内容，则必须保留占位符（单击然后单击选择器不选择实际选项，并且占位符内容应保留）

当选项菜单打开时，它应该将占位符指令显示为所选选项文本，但是一旦菜单被缩小或切换，它应该显示所选文本（如果有的话）

选择框必须在模糊时关闭，并且还必须选择窗口小部件的另一个实例

Obv它必须获取所选选项的值和标识符，并将其与标识符配对，以便让应用知道数据和值来自哪个框

问题：

加载JQuery 1.7时，当您尝试切换选择框而不实际选择项目时会出现错误，选择显示的innerHTML不会读取任何内容，而是根据需要将所需的占位符内容重新添加到选择显示中（逻辑在那里，工作无误，请自己测试一下）

此外，单击正文时，所有菜单选项都应关闭，如果窗口小部件/窗口小部件未选择任何选项，则应再次向选定的显示区域注入占位符内容（如果已选择该项目）然后它应该保留它。

感谢您的帮助，尼古拉斯

Answer 1

http://codepen.io/anon/pen/koeCc

这是相同的代码，对.selected类的目标方式进行了一些小改动（直接定位而不是使用.each（$（this ...）我不知道为什么这个bug适用于1.11。 1但不是1.7.1，但现在它适用于两者！

line 25:  .html( $('.selected-option').html() )

现在差异：

line 25:        .html( $(this).children(selected).html() )

我的脚本适用于当前的jquery 1.11.1，但不适用于1.7.1。为什么？

1 个答案: