javascript - 保留通过追加添加的选择下拉列表的顺序-6ren

javascript - 保留通过追加添加的选择下拉列表的顺序

转载作者：行者123 更新时间：2023-11-30 20:20:07

我正在使用 jQuery 将选项动态添加到 select。

$("input[name='config']").on('change', function () {
    let config = $("input[name='config']").val();
    let dropdown = $('#forumselect');
    let configlabel = $("#config_required-error");
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        dataType: 'json',
        data: {configpath: config, action: 'validateconfig'},
        success: function (data) {
            if (data.status === 'success') {
                $(':input[type="submit"]').prop('disabled', false);
                $("#inputadminid").prop('disabled', false);
                $("#configfield").removeClass("has-error");
                configlabel.css("display", "none");
                configlabel.empty();
                dropdown.empty();
                let count = 0;
                let disabled = false;
                $.each(data.nodes, function (key, entry) {
                    disabled = (entry.node_type_id === 'Category');
                    dropdown.append($('<option></option>').prop('value', entry.node_id).text(addpadding(entry.title,entry.depth)).prop('disabled', disabled));
                    count++;
                });
                dropdown.prop('size', count);
            } else {
                $(':input[type="submit"]').prop('disabled', true);
                $("#inputadminid").prop('disabled', true);
                $("#configfield").addClass("has-error");
                configlabel.css("display", "inline-block");
                configlabel.text(data.errortext);
                dropdown.empty();
                dropdown.prop('size', 0);
            }

        }
    });
});

这是示例响应数据

{"status":"success","nodes":{"297":{"node_id":"297","node_type_id":"Category","title":"Papertrey Ink Forum","depth":"0","lft":"1"},"5":{"node_id":"5","node_type_id":"Forum","title":"Stamp Release Parties","depth":"1","lft":"2"},"227":{"node_id":"227","node_type_id":"Forum","title":"February 2015 Release","depth":"2","lft":"3"},"231":{"node_id":"231","node_type_id":"Forum","title":"March 2015 Release","depth":"2","lft":"5"},"233":{"node_id":"233","node_type_id":"Forum","title":"April 2015 Release","depth":"2","lft":"7"},"235":{"node_id":"235","node_type_id":"Forum","title":"May 2015 Release","depth":"2","lft":"9"},"239":{"node_id":"239","node_type_id":"Forum","title":"June 2015 Release","depth":"2","lft":"11"},"241":{"node_id":"241","node_type_id":"Forum","title":"July 2015 Release","depth":"2","lft":"13"},"244":{"node_id":"244","node_type_id":"Forum","title":"August 2015 Release","depth":"2","lft":"15"},"247":{"node_id":"247","node_type_id":"Forum","title":"September 2015 Release","depth":"2","lft":"17"},"249":{"node_id":"249","node_type_id":"Forum","title":"October 2015 Release","depth":"2","lft":"19"},"251":{"node_id":"251","node_type_id":"Forum","title":"November 2015 Release","depth":"2","lft":"21"},"253":{"node_id":"253","node_type_id":"Forum","title":"December 2015 Release","depth":"2","lft":"23"},"255":{"node_id":"255","node_type_id":"Forum","title":"January 2016 Release","depth":"2","lft":"25"},"257":{"node_id":"257","node_type_id":"Forum","title":"February 2016 Release","depth":"2","lft":"27"},"259":{"node_id":"259","node_type_id":"Forum","title":"March 2016 Release","depth":"2","lft":"29"},"261":{"node_id":"261","node_type_id":"Forum","title":"April 2016 Release","depth":"2","lft":"31"},"263":{"node_id":"263","node_type_id":"Forum","title":"May 2016 Release","depth":"2","lft":"33"},"265":{"node_id":"265","node_type_id":"Forum","title":"June 2016 Release","depth":"2","lft":"35"},"269":{"node_id":"269","node_type_id":"Forum","title":"July 2016 Release","depth":"2","lft":"37"},"271":{"node_id":"271","node_type_id":"Forum","title":"August 2016 Release","depth":"2","lft":"39"},"275":{"node_id":"275","node_type_id":"Forum","title":"September 2016 Release","depth":"2","lft":"41"},"277":{"node_id":"277","node_type_id":"Forum","title":"October 2016 Release","depth":"2","lft":"43"},"279":{"node_id":"279","node_type_id":"Forum","title":"November 2016 Release","depth":"2","lft":"45"},"282":{"node_id":"282","node_type_id":"Forum","title":"December 2016 Release","depth":"2","lft":"47"},"284":{"node_id":"284","node_type_id":"Forum","title":"January 2017 Release","depth":"2","lft":"49"},"287":{"node_id":"287","node_type_id":"Forum","title":"March 2017 Release","depth":"2","lft":"51"},"289":{"node_id":"289","node_type_id":"Forum","title":"April 2017 Release","depth":"2","lft":"53"},"291":{"node_id":"291","node_type_id":"Forum","title":"May 2017 Release","depth":"2","lft":"55"},"293":{"node_id":"293","node_type_id":"Forum","title":"June 2017 Release","depth":"2","lft":"57"},"295":{"node_id":"295","node_type_id":"Forum","title":"July 2017 Release","depth":"2","lft":"59"},"9":{"node_id":"9","node_type_id":"Forum","title":"Design Team Only","depth":"1","lft":"62"},"137":{"node_id":"137","node_type_id":"Forum","title":"Moderator HQ","depth":"2","lft":"63"},"189":{"node_id":"189","node_type_id":"Forum","title":"Make It Market Kit Co.","depth":"2","lft":"65"},"201":{"node_id":"201","node_type_id":"Forum","title":"Stamp-a-faire 2014","depth":"2","lft":"67"},"221":{"node_id":"221","node_type_id":"Forum","title":"Quick Stitch Kits","depth":"2","lft":"69"},"222":{"node_id":"222","node_type_id":"Forum","title":"Moments Inked","depth":"2","lft":"71"},"223":{"node_id":"223","node_type_id":"Forum","title":"Stamp-a-faire 2015","depth":"2","lft":"73"},"266":{"node_id":"266","node_type_id":"Forum","title":"Stamp-a-faire 2016","depth":"2","lft":"75"},"13":{"node_id":"13","node_type_id":"Forum","title":"RAK","depth":"1","lft":"78"},"17":{"node_id":"17","node_type_id":"Forum","title":"Gallery","depth":"1","lft":"80"},"16":{"node_id":"16","node_type_id":"Forum","title":"Off Topic","depth":"1","lft":"82"},"30":{"node_id":"30","node_type_id":"Forum","title":"Happy Birthday","depth":"2","lft":"83"},"26":{"node_id":"26","node_type_id":"Forum","title":"I Spy PTI","depth":"1","lft":"86"},"105":{"node_id":"105","node_type_id":"Forum","title":"Make It Monday","depth":"1","lft":"88"},"140":{"node_id":"140","node_type_id":"Forum","title":"Please Read - Registration Required","depth":"1","lft":"90"},"95":{"node_id":"95","node_type_id":"Forum","title":"For Sale\/Trade","depth":"1","lft":"92"},"273":{"node_id":"273","node_type_id":"Forum","title":"For Sale\/Trade","depth":"2","lft":"93"},"274":{"node_id":"274","node_type_id":"Forum","title":"In Search Of","depth":"2","lft":"95"},"281":{"node_id":"281","node_type_id":"Forum","title":"Recipe Exchange","depth":"1","lft":"98"},"21":{"node_id":"21","node_type_id":"Forum","title":"All Things Scrapbooking","depth":"1","lft":"100"},"226":{"node_id":"226","node_type_id":"Forum","title":"Stamping Talk","depth":"1","lft":"102"},"268":{"node_id":"268","node_type_id":"Forum","title":"Stamp-a-faire 2016","depth":"2","lft":"103"},"18":{"node_id":"18","node_type_id":"Forum","title":"Techniques & Tutorials","depth":"2","lft":"105"},"58":{"node_id":"58","node_type_id":"Forum","title":"File Sharing","depth":"2","lft":"107"},"29":{"node_id":"29","node_type_id":"Forum","title":"Matching Colors","depth":"3","lft":"108"},"59":{"node_id":"59","node_type_id":"Forum","title":"Crafty Spaces","depth":"2","lft":"111"},"60":{"node_id":"60","node_type_id":"Forum","title":"Product Ideas & Questions","depth":"2","lft":"113"},"83":{"node_id":"83","node_type_id":"Forum","title":"Blog Talk","depth":"2","lft":"115"},"96":{"node_id":"96","node_type_id":"Forum","title":"Showcase Items","depth":"2","lft":"117"},"102":{"node_id":"102","node_type_id":"Forum","title":"Holiday Central","depth":"2","lft":"119"},"123":{"node_id":"123","node_type_id":"Forum","title":"Team Tips & Techniques","depth":"2","lft":"121"},"190":{"node_id":"190","node_type_id":"Forum","title":"Organization","depth":"2","lft":"123"},"197":{"node_id":"197","node_type_id":"Forum","title":"Website Questions","depth":"2","lft":"125"},"224":{"node_id":"224","node_type_id":"Forum","title":"Misti Chatter","depth":"2","lft":"127"},"229":{"node_id":"229","node_type_id":"Forum","title":"Moments Inked","depth":"2","lft":"129"},"238":{"node_id":"238","node_type_id":"Forum","title":"Stitching Dies","depth":"2","lft":"131"},"15":{"node_id":"15","node_type_id":"Forum","title":"Blog Hop","depth":"1","lft":"134"},"278":{"node_id":"278","node_type_id":"Forum","title":"October 2016 Blog Hop","depth":"2","lft":"135"},"280":{"node_id":"280","node_type_id":"Forum","title":"November 2016 Blog Hop","depth":"2","lft":"137"},"283":{"node_id":"283","node_type_id":"Forum","title":"December 2016 Blog Hop","depth":"2","lft":"139"},"285":{"node_id":"285","node_type_id":"Forum","title":"January 2017 Blog Hop","depth":"2","lft":"141"},"286":{"node_id":"286","node_type_id":"Forum","title":"February 2017 Blog Hop","depth":"2","lft":"143"},"288":{"node_id":"288","node_type_id":"Forum","title":"March 2017 Blog Hop","depth":"2","lft":"145"},"290":{"node_id":"290","node_type_id":"Forum","title":"April 2017 Blog Hop","depth":"2","lft":"147"},"292":{"node_id":"292","node_type_id":"Forum","title":"May 2017 Blog Hop","depth":"2","lft":"149"},"294":{"node_id":"294","node_type_id":"Forum","title":"June 2017 Blog Hop","depth":"2","lft":"151"},"296":{"node_id":"296","node_type_id":"Forum","title":"July 2017 Blog Hop","depth":"2","lft":"153"}},"errortext":""}

问题是我想保留 nodes 数组的原始顺序，但它始终按值排序。AND HTML 输出是

<select multiple="" name="forums[]" id="forumselect" class="form-control mb-15" size="78">
   <option value="5">&nbsp; &nbsp; Stamp Release Parties</option>
   <option value="9">&nbsp; &nbsp; Design Team Only</option>
   <option value="13">&nbsp; &nbsp; RAK</option>
   <option value="15">&nbsp; &nbsp; Blog Hop</option>
   <option value="16">&nbsp; &nbsp; Off Topic</option>
   <option value="17">&nbsp; &nbsp; Gallery</option>
   <option value="18">&nbsp; &nbsp; &nbsp; &nbsp; Techniques &amp; Tutorials</option>
   <option value="21">&nbsp; &nbsp; All Things Scrapbooking</option>
   <option value="26">&nbsp; &nbsp; I Spy PTI</option>
   <option value="29">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Matching Colors</option>
   <option value="30">&nbsp; &nbsp; &nbsp; &nbsp; Happy Birthday</option>
   <option value="58">&nbsp; &nbsp; &nbsp; &nbsp; File Sharing</option>
   <option value="59">&nbsp; &nbsp; &nbsp; &nbsp; Crafty Spaces</option>
   <option value="60">&nbsp; &nbsp; &nbsp; &nbsp; Product Ideas &amp; Questions</option>
   <option value="83">&nbsp; &nbsp; &nbsp; &nbsp; Blog Talk</option>
   <option value="95">&nbsp; &nbsp; For Sale/Trade</option>
   <option value="96">&nbsp; &nbsp; &nbsp; &nbsp; Showcase Items</option>
   <option value="102">&nbsp; &nbsp; &nbsp; &nbsp; Holiday Central</option>
   <option value="105">&nbsp; &nbsp; Make It Monday</option>
   <option value="123">&nbsp; &nbsp; &nbsp; &nbsp; Team Tips &amp; Techniques</option>
   <option value="137">&nbsp; &nbsp; &nbsp; &nbsp; Moderator HQ</option>
   <option value="140">&nbsp; &nbsp; Please Read - Registration Required</option>
   <option value="189">&nbsp; &nbsp; &nbsp; &nbsp; Make It Market Kit Co.</option>
   <option value="190">&nbsp; &nbsp; &nbsp; &nbsp; Organization</option>
   <option value="197">&nbsp; &nbsp; &nbsp; &nbsp; Website Questions</option>
   <option value="201">&nbsp; &nbsp; &nbsp; &nbsp; Stamp-a-faire 2014</option>
   <option value="221">&nbsp; &nbsp; &nbsp; &nbsp; Quick Stitch Kits</option>
   <option value="222">&nbsp; &nbsp; &nbsp; &nbsp; Moments Inked</option>
   <option value="223">&nbsp; &nbsp; &nbsp; &nbsp; Stamp-a-faire 2015</option>
   <option value="224">&nbsp; &nbsp; &nbsp; &nbsp; Misti Chatter</option>
   <option value="226">&nbsp; &nbsp; Stamping Talk</option>
   <option value="227">&nbsp; &nbsp; &nbsp; &nbsp; February 2015 Release</option>
   <option value="229">&nbsp; &nbsp; &nbsp; &nbsp; Moments Inked</option>
   <option value="231">&nbsp; &nbsp; &nbsp; &nbsp; March 2015 Release</option>
   <option value="233">&nbsp; &nbsp; &nbsp; &nbsp; April 2015 Release</option>
   <option value="235">&nbsp; &nbsp; &nbsp; &nbsp; May 2015 Release</option>
   <option value="238">&nbsp; &nbsp; &nbsp; &nbsp; Stitching Dies</option>
   <option value="239">&nbsp; &nbsp; &nbsp; &nbsp; June 2015 Release</option>
   <option value="241">&nbsp; &nbsp; &nbsp; &nbsp; July 2015 Release</option>
   <option value="244">&nbsp; &nbsp; &nbsp; &nbsp; August 2015 Release</option>
   <option value="247">&nbsp; &nbsp; &nbsp; &nbsp; September 2015 Release</option>
   <option value="249">&nbsp; &nbsp; &nbsp; &nbsp; October 2015 Release</option>
   <option value="251">&nbsp; &nbsp; &nbsp; &nbsp; November 2015 Release</option>
   <option value="253">&nbsp; &nbsp; &nbsp; &nbsp; December 2015 Release</option>
   <option value="255">&nbsp; &nbsp; &nbsp; &nbsp; January 2016 Release</option>
   <option value="257">&nbsp; &nbsp; &nbsp; &nbsp; February 2016 Release</option>
   <option value="259">&nbsp; &nbsp; &nbsp; &nbsp; March 2016 Release</option>
   <option value="261">&nbsp; &nbsp; &nbsp; &nbsp; April 2016 Release</option>
   <option value="263">&nbsp; &nbsp; &nbsp; &nbsp; May 2016 Release</option>
   <option value="265">&nbsp; &nbsp; &nbsp; &nbsp; June 2016 Release</option>
   <option value="266">&nbsp; &nbsp; &nbsp; &nbsp; Stamp-a-faire 2016</option>
   <option value="268">&nbsp; &nbsp; &nbsp; &nbsp; Stamp-a-faire 2016</option>
   <option value="269">&nbsp; &nbsp; &nbsp; &nbsp; July 2016 Release</option>
   <option value="271">&nbsp; &nbsp; &nbsp; &nbsp; August 2016 Release</option>
   <option value="273">&nbsp; &nbsp; &nbsp; &nbsp; For Sale/Trade</option>
   <option value="274">&nbsp; &nbsp; &nbsp; &nbsp; In Search Of</option>
   <option value="275">&nbsp; &nbsp; &nbsp; &nbsp; September 2016 Release</option>
   <option value="277">&nbsp; &nbsp; &nbsp; &nbsp; October 2016 Release</option>
   <option value="278">&nbsp; &nbsp; &nbsp; &nbsp; October 2016 Blog Hop</option>
   <option value="279">&nbsp; &nbsp; &nbsp; &nbsp; November 2016 Release</option>
   <option value="280">&nbsp; &nbsp; &nbsp; &nbsp; November 2016 Blog Hop</option>
   <option value="281">&nbsp; &nbsp; Recipe Exchange</option>
   <option value="282">&nbsp; &nbsp; &nbsp; &nbsp; December 2016 Release</option>
   <option value="283">&nbsp; &nbsp; &nbsp; &nbsp; December 2016 Blog Hop</option>
   <option value="284">&nbsp; &nbsp; &nbsp; &nbsp; January 2017 Release</option>
   <option value="285">&nbsp; &nbsp; &nbsp; &nbsp; January 2017 Blog Hop</option>
   <option value="286">&nbsp; &nbsp; &nbsp; &nbsp; February 2017 Blog Hop</option>
   <option value="287">&nbsp; &nbsp; &nbsp; &nbsp; March 2017 Release</option>
   <option value="288">&nbsp; &nbsp; &nbsp; &nbsp; March 2017 Blog Hop</option>
   <option value="289">&nbsp; &nbsp; &nbsp; &nbsp; April 2017 Release</option>
   <option value="290">&nbsp; &nbsp; &nbsp; &nbsp; April 2017 Blog Hop</option>
   <option value="291">&nbsp; &nbsp; &nbsp; &nbsp; May 2017 Release</option>
   <option value="292">&nbsp; &nbsp; &nbsp; &nbsp; May 2017 Blog Hop</option>
   <option value="293">&nbsp; &nbsp; &nbsp; &nbsp; June 2017 Release</option>
   <option value="294">&nbsp; &nbsp; &nbsp; &nbsp; June 2017 Blog Hop</option>
   <option value="295">&nbsp; &nbsp; &nbsp; &nbsp; July 2017 Release</option>
   <option value="296">&nbsp; &nbsp; &nbsp; &nbsp; July 2017 Blog Hop</option>
   <option value="297" disabled="">Papertrey Ink Forum</option>
</select>

最佳答案

您的问题是因为 nodes 属性包含一个对象。虽然可以循环遍历它，但无论如何都不能保证对象内属性的顺序，并且可以在运行时更改 - 正如您现在发现的那样。

要解决此问题，请更改 nodes 属性以保存一个数组，因为数组中元素的顺序永远不会更改，除非您在代码中明确这样做。

关于javascript - 保留通过追加添加的选择下拉列表的顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51534848/

文章推荐： c - 使用指针的段错误(核心转储)

文章推荐： C# 交互式跳过代码中的断点？

文章推荐： javascript - 我如何在 Mongoose 聚合中找到数组的长度

文章推荐： javascript - react-pdf 安装时的 webpack 插件错误

sh - 保留 $?
仅使用POSIX shell 的特性，是否有一个“简单命令”，它什么也不做，也不改变$? 的值。人们通常描述:作为 shell 的无操作命令，但这总是设置 $?为零，所以这不是我想要的。这是生成 s
opengl - 保留 GLBlendFunc
我需要保留当前的 GlBlendFunc 以便在我做一些工作后可以恢复它。似乎这不是可以用 GLPushAttrib 保存的属性之一，还有其他类似的方法可以用来保存状态吗？最佳答案 glGet与
java - 查询解决方案，保留 "< >"
我目前正致力于创建 Fuseki 三重存储浏览器的项目。我需要可视化 TripleStore 中的所有数据并使应用程序可浏览。唯一的问题是 QuerySolution 遗漏了三元组中的“”。如果我使
ios - 保留 Appdelegate
我知道没有必要保留委托(delegate)，以避免保留循环。我在一次采访中碰巧遇到了一个问题，“如果保留了 appDelegate 会怎样？”。我对此没有答案，并根据我的知识在这里寻求答案。谢谢最佳
c - 动态数据结构、保留
我正在用 C 编写第一个更严肃的程序，但我陷入了困境。我需要将此列表排序为不同的单独文件，因此它看起来像这样: BE30B Berlin 2014-04-02 Gale 02 BE30B Berlin
javascript - 保留，但停用样式表和脚本
我有 4 个页面，我使用 ajax 和 historyPopState 在它们之间进行更改。但是有一个问题，因为页面非常不同，它们使用不同的样式表和脚本。我可以一遍又一遍地下载它们，但我想问一下是否有
php - 保留/刷新表单在数据库中创建了额外的行
我有一个表单，其中包含从一个表创建的多行(与其他表没有关系)。当我保存表单时，我所做的每项更改都会保存，但数据库中确实有一个额外的空行。请参阅下文(希望)了解所有必要的信息。 PropertyAddi
android - 保留 fragment
我正在编写一个可以在 Canvas 上绘制气泡的应用程序。我有 MainActivity，它的布局是一个简单的 LinearLayout，我将其用作 fragment 的容器。当我在 Canvas 上
ios - 保留/释放错误
我想弄清楚为什么我通过这段代码得到 EXC_BAD_ACESS。我没有线索。谁能帮帮我。 - (void)loadJsonFile:(NSString*)fileName { NSError
python - 保留 if 语句中的值
我正在编写一个代码，它将遍历单词中的每个单词，在字典中查找它们，然后将字典值附加到计数器。但是，如果我打印计数器，我只会从我的 if 语句中获取最后一个数字(如果有的话)。如果我将 print cou
javascript - 保留、隐藏和重置基于按钮的选择选项
抱歉，标题有点困惑。我想隐藏这些选择选项，只在用户选择按钮时显示。一旦用户选择了一个按钮，我希望选择字段将继续显示......但是如果用户选择了不同的按钮，我想从以前的选择中重置所选的选项并炫耀。
python - 保留 "\n"
>>> t = "first%s\n" >>> t = t %("second") >>> print t firstsecond 无论如何我可以保留最后的“\n”并得到“firstsecond\n”
javascript - 保留 if 语句中对变量的更改
我试图弄清楚如何更改 if 语句中的变量并使其保持全局不变。用户输入:!change Hi var A = "Hello" if (msg.content.includes ('!change'))
Android - 保留 fragment ？
您好，我有一个关于在重新创建 Activity 时保留 fragment 的问题。我听说一种方法是在 onCreate 方法中使用 setRetainFragment(true) 。问题是——这与跟踪
iphone - 保留 rootViewController？
我想知道是否有人可以帮助我解决下面代码中的内存管理问题。我对 rootController 特别感兴趣，它是在我执行 initWithRootViewController 时被保留还是在窗口 addS
iphone - 保留/复制自动释放的对象
我想确保我在这里正确理解了内存管理。是否有任何特殊原因在这里使用其中一种 assignCurrentDate 方法而不是另一种方法？此外，所有这些都不会导致内存泄漏，对吗？在 .h 中我们有: NS
Angular2 保留/添加尾部斜线
我对 Angular2 删除尾部斜杠有疑问。我已经设置了我的 dotnet 核心应用程序来添加它们，但是一旦加载了 js，它们就会被删除。在 Angular2 中甚至可能吗？ (我的客户需要它，所以
python - 保留 key
local_settings.py 反模式的原因之一是把 SECRET_KEY, AWS设置文件中的键等值有问题: secret 通常应该是这样的: secret !将它们保存在版本控制中意味着拥有存
javascript - 保留 Webpack 中模块的顺序
import('./A'); import('./B'); import('./C'); export class Person {}; A、B 和 C 是纯 JS (es5) 库，它们使用全局 wi
保留 R 数据框中的行，这些行在列中包含特定模式
df 是一个测试数据框，其中我只想保留 Hits 列中包含 | 字符的行和行其中包含 hits(即 Hit1、Hit2 等)以及 Hits 列中的空白单元格。 df 从开始 (^) 到结束 ($)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 保留通过追加添加的选择下拉列表的顺序