代码之家  ›  专栏  ›  技术社区  ›  Terry

检索已使用JavaScript重新排序的选择元素选项列表

  •  0
  • Terry  · 技术社区  · 7 年前

    我有一个从控制器传递到视图的名称/数字字典。这将成为:

    Model.arrayPositions[x]
    

    然后将其添加到选择列表中:

                    <form>
                        <div class="col-xs-12">
                            <select id="ListIn" class="select-width" name="SelectionIn" multiple="multiple" size="@Model.arrayPositions.Count">
                                @foreach (var item in Model.arrayPositions)
                                {
                                    if (item.Value != null)
                                    {
                                        <option class="active" value="@item.Value">@Html.DisplayFor(modelItem => @item.Key)</option>
                                    }
                                }
                            </select>
                        </div>
                    </form>
    

    将忽略没有值的数组项,其余的将添加到列表中。

    然后可以使用JavaScript在列表中添加/删除或上移/下移项目:

    function AddSelected() {
        $('#ListOut option:selected').each(function (i, selected) {
            $('#ListIn').append('<option class="active" value="1">' + selected.innerText + '</option>');
            selected.remove();
        });
    }
    function RemoveSelected() {
        $('#ListIn option:selected').each(function (i, selected) {
            $('#ListOut').append('<option class="inactive" value="-1">' + selected.innerText + '</option>');
            selected.remove();
        });
    
    
    function MoveUp() {
        var select1 = document.getElementById("ListIn");
    
        for (var i = 0; i < select1.length; i++) {
            if (select1.options[i].selected && i > 0 && !select1.options[i - 1].selected)
            {
                var text = select1.options[i].innerText;
                select1.options[i].innerText = select1.options[i - 1].innerText;
                select1.options[i - 1].innerText = text;
                select1.options[i - 1].selected = true;
                select1.options[i].selected = false;
            }
        }
    }
    

    (向下移动与向上移动几乎完全相反)

    (#ListOut只是第二个列表,其中添加了值为null的数组项)

    (最终值现在不太重要,所以我没有特别保留它。列表的顺序更重要)

    我正在使用Javascript更改顺序,以避免页面因如此简单的操作而不断刷新。

    然而,一旦按下更新按钮,我将调用我的控制器(C#中的ASP.NET核心)。我想知道的是如何以新的顺序检索列表的最终值。

    If型号。arrayPositions={a=1,b=2,c=null,d=3},它会将它们添加到列表中:[a,b,d]

    然后,我使用javascript删除“a”并向上移动“d”,从而得到[d,b]

    当我按下更新按钮时,我想从视图中检索当前的[d,b]列表。

    实现这一目标的最佳方式是什么?或者,也可以使用其他哪些方法来实现相同的目标(请注意,如果可能的话,我不希望页面刷新或部分刷新)。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Arshdeep Singh    7 年前

    您可以使用ajax方法点击更新按钮来点击控制器

    jquery ajax的语法是:-

    <script>
    
    $.ajax({
            type:'POST',
            url : 'controllerNAME/ActionNAME',
            datatype: 'json',
            data : {'parameterOne': parameterone, 'parameterTwo' : parametertwo,...},
            success : function(response)
            {
                 alert(response.d)
                 //put your logic here for further advancements
            }
    });
    
    </script>