Question

当我需要在页面上隐藏元素时，我遇到了一些困难。

我正在使用此脚本创建我的多选下拉元素，该元素是页面上元素的主控制器（http://wenzhixin.net.cn/p/multiple-select/docs/#the-basics1）。

它返回一个选定元素的数组，我的元素将其showIfValues设置在JSON文件中。

我的功能应该这样做：

我从数组中的下拉元素中选择了值（例如[＆＃34; value1＆＃34;，＆＃34; value2＆＃34;]）。
浏览所有元素并找到showIfValue中上述数组中的任何值，显示它
在更改多选下拉列表时，如果删除了任何字段，请删除该元素，但将其余部分保留在页面上。

showHideHendler函数中的图例：

inp 是我想在页面上显示的输入字段的ID
controlInp 是控件输入（在这种情况下是多选下拉列表）
value 是使用元素的JSON文件中的showIfValues填充的数组

到目前为止，我在这里做到了。这些是我实施的内容。

function diffArray(arr1, arr2) {
    return arr1.concat(arr2).filter(function (val) {
        if (!(arr1.includes(val) && arr2.includes(val)))
            return val;
    });
}

function getSelectedValues(controlInput){
    if($('#' + controlInput).attr("multiple") === "multiple"){
        // var selectValues = $('#' + controlInput).multipleSelect("getSelects");
        var selectValues = [];
        if($('#' + controlInput).multipleSelect("getSelects") != null) {
            selectValues = $('#' + controlInput).multipleSelect("getSelects");  
        }

        return selectValues;
    }
}

var multipleShowHideHandler = (function() {

    var selectedValues = [];

    function setSelectedValues(value){
        selectedValues.push(value);
    }

    function overrideSelected(value){
        selectedValues = value;
    }

    function getSelectedValues(){
        return selectedValues;
    }

    return {
        setSelectedValues: setSelectedValues,
        getSelectedValues: getSelectedValues,
        overrideSelected: overrideSelected
    }

})();



 function showHideHandler(inp, controlInp, value) {
    if (!$('#' + controlInp).is(':checkbox') && !($.isArray(value))) {
        value = $.makeArray(value);
    }

    var selectedValues = getSelectedValues(controlInp);

    if(($('#' + controlInp).attr("multiple") === "multiple") && !$.isEmptyObject(selectedValues)){
        $('#' + controlInp).change(function(){

            var oldState = multipleShowHideHandler.getSelectedValues();
            var selectedValues = getSelectedValues(controlInp);

            if($.isEmptyObject(oldState)){
                $.each(selectedValues, function(i, val){
                    multipleShowHideHandler.setSelectedValues(val);
                });
            }

            var differentArray = diffArray(selectedValues, oldState);

            if(!$.isEmptyObject(differentArray)){
                if(($.inArray(differentArray[0], value) !== -1)){
                    $('#' + inp + 'Container').hide();
                }
                multipleShowHideHandler.overrideSelected(selectedValues);
            }

            //check diff
            /*if(!$.isEmptyObject(selectedValues) && !$.isEmptyObject(oldState)){
                var diff = diffArray(selectedValues, oldState);
            }*/

            $.each(selectedValues, function(i, val){
                if(($.inArray(val, value) !== -1)){
                    $('#' + inp + 'Container').show();
                }
            });
        });


    }else if (($.inArray($('#' + controlInp).val(), value) > -1) || $('#' + controlInp).prop('checked') === value) {
        $('#' + inp + 'Container').show();
    } else {
        $('#' + inp + 'Container').hide();
    }
}

这适用于某些元素，但是当它覆盖我的oldState时，字段不会被隐藏。

非常感谢任何形式的帮助。提前谢谢。

Answer 1

在查看并尝试了很多东西后，我发现最简单的方法是删除所有元素，并在多重选择下拉元素的任何更改时再次显示它们。

所以最终的代码如下：

{{1}}

没有必要添加之前的状态，之后这是我唯一需要的东西。

不再需要DiffArray和multipleShowHideHandler。

希望这有助于将来。

显示和隐藏我的案例的元素选项

1 个答案: