如何基于JSON优化下拉选择框（Select）的填充性能？

嗨，咱们来一起解决这个性能问题和联动需求吧！你当前的代码瓶颈在于频繁的DOM操作——每次循环里都对两个<select>执行append()，每一次append都会触发浏览器的重排（reflow）和重绘（repaint），300-400条数据下来就是600+次DOM操作，这肯定会导致延迟。下面是几个性能更优的方案：

1. 批量构建HTML字符串，一次性插入DOM #

这是最直接高效的优化方式：先在内存中把所有<option>的HTML字符串拼接好，最后一次性插入到对应的<select>中，这样只需要2次DOM操作（每个select一次），而非几百次。

修改后的代码示例：

$.ajax({ 
    method: 'post', 
    url: wpajax_initialise_combos,
    dataType: 'json', // 注意这里是驼峰的dataType，不是全小写的datatype
    cache: false, 
    success: function(from_data) { 
        // 因为dataType设为json，from_data已经是解析好的对象，不用再手动parseJSON
        let combo1Options = '';
        let combo2Options = '';
        
        $.each(from_data, function(key, value) {
            // 拼接option字符串
            const optionHtml = `<option value="${key}">${value}</option>`;
            combo1Options += optionHtml;
            combo2Options += optionHtml;
        });
        
        // 一次性插入到两个select中
        $('#combobox').append(combo1Options);
        $('#combobox2').append(combo2Options);
    } 
});

2. 使用DocumentFragment（可选，适合复杂DOM构建） #

如果需要创建更复杂的DOM节点（不只是简单字符串），可以用DocumentFragment——它是内存中的DOM容器，把所有<option>添加到片段后再一次性插入，同样只触发一次DOM重排：

$.ajax({ 
    method: 'post', 
    url: wpajax_initialise_combos,
    dataType: 'json',
    cache: false, 
    success: function(from_data) { 
        const frag1 = document.createDocumentFragment();
        const frag2 = document.createDocumentFragment();
        
        $.each(from_data, function(key, value) {
            const option = $("<option></option>")
                .attr("value", key)
                .text(value)[0]; // 获取原生DOM节点
            
            frag1.appendChild(option.cloneNode(true));
            frag2.appendChild(option);
        });
        
        $('#combobox')[0].appendChild(frag1);
        $('#combobox2')[0].appendChild(frag2);
    } 
});

关于联动下拉框的优化方案 #

你提到原本想做联动但因为性能延迟改成提交时处理，其实优化后完全可以实现流畅的联动——核心是缓存请求到的数据，避免重复AJAX请求，然后在第一个下拉框的change事件中用批量方式快速填充第二个下拉框。

示例代码：

// 全局缓存请求到的数据
let comboData = null;

$.ajax({ 
    method: 'post', 
    url: wpajax_initialise_combos,
    dataType: 'json',
    cache: false, 
    success: function(from_data) { 
        comboData = from_data;
        
        // 先填充第一个下拉框
        let combo1Options = '';
        $.each(comboData, function(key, value) {
            combo1Options += `<option value="${key}">${value}</option>`;
        });
        $('#combobox').append(combo1Options);
    } 
});

// 第一个下拉框的change事件，实时填充第二个
$('#combobox').on('change', function() {
    const selectedKey = $(this).val();
    // 根据选中值过滤数据（这里假设是关联逻辑，你可以根据实际需求调整）
    const filteredData = Object.fromEntries(
        Object.entries(comboData).filter(([key]) => key === selectedKey)
        // 如果是父类-子类关联，这里可以改成过滤对应子类的逻辑
    );
    
    // 批量填充第二个下拉框
    let combo2Options = '';
    $.each(filteredData, function(key, value) {
        combo2Options += `<option value="${key}">${value}</option>`;
    });
    $('#combobox2').html(combo2Options); // 用html()清空原有选项再添加新内容
});

这样联动操作完全在本地完成，没有AJAX请求延迟，而且批量DOM操作保证了流畅性。

额外小优化 #

• 修正dataType参数：你原来写的是datatype（全小写），jQuery的正确参数是dataType（驼峰），设置正确后，success回调的from_data会自动解析为JSON对象，不需要再调用jQuery.parseJSON()，节省解析开销。
• 如果下拉框有默认选项，可以在拼接字符串时先保留这些选项，或者用append()而非html()来保留原有内容。

内容的提问来源于stack exchange，提问作者IMO