对jsp排序元素项消失

Question

我在.jsp页面中有两个列表框，其间有Add（+）和Remove（-）按钮。两个列表框是“可用项”（左）和“选定项”（右）。 “可用项目”列表框显示了从数据库获取页面加载时的所有可用项目，“选择的项目”列表框显示为空白。用户可以在“选定的项目”列表框中从左到右添加一个项目。

我已经编写了代码来从两侧移动物品，反之亦然。但是问题是当我单击'Add'按钮从左向右移动项目时，该项目已正确移动到右列表框，但是左列表（“可用项目”）项目却显示为vanished，并且仅在执行后重新出现从UI开发角度来看，单击事件是一个很奇怪的列表框。单击“删除”按钮也发生同样的情况。我希望下划线有一些刷新问题。我在下面发布代码。

NB：我已经写了一种排序方法来对列表框中的项目进行排序。我进行了故障排除，如果我关闭调用方法sortItemsList（）的话，那么一切都很好。

列表框的代码：

 <tr>
    <td>
        <select id="leftItemList" size="8" multiple="multiple" style="height:auto"></select>
            <input type="button" name="moveItemsToLeft" id="buttonAddItems" class="selectBoxAddButton checkboxDependent" value="Add &gt;&gt;" />
            <input type="button" id="buttonRemoveItems" class="selectBoxRemoveButton checkboxDependent" value="&lt;&lt; Remove" />
        <select id="rightItemList" size="8" multiple="multiple" style="height:auto"></select>
    </td>
</tr>

导致问题的javascript排序对应代码：

添加和删除项目的代码：

    $('#buttonAddItems').click(function(){      //Moving items from left to right   
        var elementFrom = document.getElementById('leftItemList');
        var element = document.getElementById('rightItemList');

        var len = element.options.length;       
        var elementFromLength = elementFrom.length;

        for ( var i = (elementFromLength - 1); i >= 0; i--) {           
            if ((elementFrom.options[i] != null) && (elementFrom.options[i].selected == true)) {

                var selectedItemLength = $("#leftItemList :selected").length;
                element.options[len] = new Option(
                elementFrom.options[i].text,
                elementFrom.options[i].value);
                len++;
                elementFrom.options[i] = null;
            }
        }   
        sortItemsList(); //Commenting this call fixes the problem       
    });

        $('#buttonRemoveItems').click(function(){  //Moving items from right to left        
        var element = document.getElementById('rightItemList');
        var elementTo = document.getElementById('leftItemList');

        var len = element.options.length;
        var elementFromLength = elementTo.length;

        for ( var i = (len - 1); i >= 0; i--) {
            if ((element.options[i] != null) && (element.options[i].selected == true)) {                
                elementTo.options[elementFromLength] = new Option(
                element.options[i].text,
                element.options[i].value);
                elementFromLength++;
                element.options[i] = null;
            }
        }
        sortItemsList(); //Commenting this call fixes the problem       
    });


        function sortItemsList(){
    var options = $("#leftItemList option"); // Collect options         
    options.detach().sort(function(a,b) {    // Detach from select, then Sort
        var at = $(a).text();
        var bt = $(b).text();         
        return (at > bt)?1:((at < bt)?-1:0); // Tell the sort function how to order
    });
    options.appendTo("#leftItemList");  
}

N.B：我使用的排序代码取自下面URL的引用。尝试了两种方法。他们都没有工作。我确实有与参考中相同的“ 3.4.1 / jquery.min.js”-

https://www.geeksforgeeks.org/how-to-sort-option-elements-alphabetically-using-jquery/

Answer 1

@@ Swati我在jsfiddle中运行您的代码时遇到了同样的问题（您正在成功运行）。因此问题出在Chrome版本上。我的chrome版本是'版本81.0.4044.113（正式版本）（64位）'。我猜您的版本是'Chrome版本80.0.3987.122'比我老的一个版本，可以正常使用。最后的观察结果如下。

• 观察

在高级chrome版本中，代码可以正常工作，直到进行排序为止。但是，当代码尝试将已排序的itemList追加到现有itemList对象中时，使用针对appendTo（）方法的最新chrome版本的DOM操作存在一些问题，这意味着appendTo（）方法将已排序的itemList添加到现有DOM元素中，但刷新或该DOM元素不会发生重载。这就是为什么消失的itemList下拉列表会在手动单击下拉列表事件后获取所有值的原因。

为了解决此问题，我们需要进行手动刷新。我们可以通过以下两种不同的方式进行刷新或重新加载。

方法1：

在itemList追加之后添加以下行。

$("#leftItemList").html($("#leftItemList").html());

方法2：

我们可以在追加后将焦点设置在leftItemList元素上。如果我们采用这种方法，则当我们单击“添加”按钮时，它将在右侧添加项目列表，但是焦点将在leftItemList下拉列表中。

$("#leftItemList").focus();

所以方法1是最佳解决方案。