我正在使用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数组的原始顺序，但是它总是按值顺序排列。
和HTML输出是
<select multiple="" name="forums[]" id="forumselect" class="form-control mb-15" size="78">
<option value="5"> Stamp Release Parties</option>
<option value="9"> Design Team Only</option>
<option value="13"> RAK</option>
<option value="15"> Blog Hop</option>
<option value="16"> Off Topic</option>
<option value="17"> Gallery</option>
<option value="18"> Techniques & Tutorials</option>
<option value="21"> All Things Scrapbooking</option>
<option value="26"> I Spy PTI</option>
<option value="29"> Matching Colors</option>
<option value="30"> Happy Birthday</option>
<option value="58"> File Sharing</option>
<option value="59"> Crafty Spaces</option>
<option value="60"> Product Ideas & Questions</option>
<option value="83"> Blog Talk</option>
<option value="95"> For Sale/Trade</option>
<option value="96"> Showcase Items</option>
<option value="102"> Holiday Central</option>
<option value="105"> Make It Monday</option>
<option value="123"> Team Tips & Techniques</option>
<option value="137"> Moderator HQ</option>
<option value="140"> Please Read - Registration Required</option>
<option value="189"> Make It Market Kit Co.</option>
<option value="190"> Organization</option>
<option value="197"> Website Questions</option>
<option value="201"> Stamp-a-faire 2014</option>
<option value="221"> Quick Stitch Kits</option>
<option value="222"> Moments Inked</option>
<option value="223"> Stamp-a-faire 2015</option>
<option value="224"> Misti Chatter</option>
<option value="226"> Stamping Talk</option>
<option value="227"> February 2015 Release</option>
<option value="229"> Moments Inked</option>
<option value="231"> March 2015 Release</option>
<option value="233"> April 2015 Release</option>
<option value="235"> May 2015 Release</option>
<option value="238"> Stitching Dies</option>
<option value="239"> June 2015 Release</option>
<option value="241"> July 2015 Release</option>
<option value="244"> August 2015 Release</option>
<option value="247"> September 2015 Release</option>
<option value="249"> October 2015 Release</option>
<option value="251"> November 2015 Release</option>
<option value="253"> December 2015 Release</option>
<option value="255"> January 2016 Release</option>
<option value="257"> February 2016 Release</option>
<option value="259"> March 2016 Release</option>
<option value="261"> April 2016 Release</option>
<option value="263"> May 2016 Release</option>
<option value="265"> June 2016 Release</option>
<option value="266"> Stamp-a-faire 2016</option>
<option value="268"> Stamp-a-faire 2016</option>
<option value="269"> July 2016 Release</option>
<option value="271"> August 2016 Release</option>
<option value="273"> For Sale/Trade</option>
<option value="274"> In Search Of</option>
<option value="275"> September 2016 Release</option>
<option value="277"> October 2016 Release</option>
<option value="278"> October 2016 Blog Hop</option>
<option value="279"> November 2016 Release</option>
<option value="280"> November 2016 Blog Hop</option>
<option value="281"> Recipe Exchange</option>
<option value="282"> December 2016 Release</option>
<option value="283"> December 2016 Blog Hop</option>
<option value="284"> January 2017 Release</option>
<option value="285"> January 2017 Blog Hop</option>
<option value="286"> February 2017 Blog Hop</option>
<option value="287"> March 2017 Release</option>
<option value="288"> March 2017 Blog Hop</option>
<option value="289"> April 2017 Release</option>
<option value="290"> April 2017 Blog Hop</option>
<option value="291"> May 2017 Release</option>
<option value="292"> May 2017 Blog Hop</option>
<option value="293"> June 2017 Release</option>
<option value="294"> June 2017 Blog Hop</option>
<option value="295"> July 2017 Release</option>
<option value="296"> July 2017 Blog Hop</option>
<option value="297" disabled="">Papertrey Ink Forum</option>
</select>
答案 0 :(得分：1)
您的问题是因为nodes属性包含一个对象。尽管可以循环浏览，但是仍然不能保证对象内属性的顺序，并且可以在运行时更改-如您所见。
要解决此问题，请更改nodes属性以容纳数组，因为除非您在代码中明确进行了更改，否则数组中元素的顺序永远不会改变。