如何清除HTML/JavaScript中级联关联从属下拉框的冗余残留选项

问题根因 #

当前代码的逻辑是直接按索引为下拉框B的options赋值，当新选中的A选项对应的B选项数量少于上一次的选项数量时，索引更大的旧选项不会被自动清除，就会出现冗余残留。

解决方法 #

利用<select>元素的options.length可直接赋值的特性，在给当前选项赋值前，先将下拉框B的选项长度设置为当前分类对应的数量，删除多余的残留选项，无需清空全部原有选项。直接修改dynamicdropdown函数即可，修改后的完整代码如下：

function dynamicdropdown(listindex)
{
    const statusSelect = document.getElementById("status");
    switch (listindex)
    {
    case "manual" :
        statusSelect.options.length = 3; // 直接设置长度删除多余选项
        statusSelect.options[0]=new Option("Select status","");
        statusSelect.options[1]=new Option("OPEN","open");
        statusSelect.options[2]=new Option("DELIVERED","delivered");
        break;
    case "online" :
        statusSelect.options.length = 4;
        statusSelect.options[0]=new Option("Select status","");
        statusSelect.options[1]=new Option("OPEN","open");
        statusSelect.options[2]=new Option("DELIVERED","delivered");
        statusSelect.options[3]=new Option("SHIPPED","shipped");
        break;
    case "academic" :
        statusSelect.options.length = 8;
        statusSelect.options[0]=new Option("Select status","");
        statusSelect.options[1]=new Option("Thesis/Dissertation","thesis");
        statusSelect.options[2]=new Option("Study/Research/White paper","paper");
        statusSelect.options[3]=new Option("Journal Article for Publication","article");
        statusSelect.options[4]=new Option("Symposium/Conference Materials","conf");
        statusSelect.options[5]=new Option("Response to Peer Reviewer Comments ","peerreview");
        statusSelect.options[6]=new Option("Essay","essay");
        statusSelect.options[7]=new Option("Translation","translation");
        break;
    case "medres" :
        statusSelect.options.length = 8;
        statusSelect.options[0]=new Option("Select status","");
        statusSelect.options[1]=new Option("Thesis/Dissertation","medthesis");
        statusSelect.options[2]=new Option("Study/Research/White paper","medpaper");
        statusSelect.options[3]=new Option("Symposium/Conference Materials","medconf");
        statusSelect.options[4]=new Option("Journal Article for Publication","medpub");
        statusSelect.options[5]=new Option("Response to Peer Reviewer Comments ","medpeerreview");
        statusSelect.options[6]=new Option("Grant proposal","grant");
        statusSelect.options[7]=new Option("Translation","translation");
        break;
    case "business" :
        statusSelect.options.length = 5;
        statusSelect.options[0]=new Option("Select status","");
        statusSelect.options[1]=new Option("Business, Marketing, or Sales Document","busdoc");
        statusSelect.options[2]=new Option("Magazine Article / Blog","blog");
        statusSelect.options[3]=new Option("Website/ Online Ad Copy","website");
        statusSelect.options[4]=new Option("Translation","btranslation");
        break;
    case "jobseeker" :
        statusSelect.options.length = 4;
        statusSelect.options[0]=new Option("Select status","");
        statusSelect.options[1]=new Option("Personal Letter / Application","jobapp");
        statusSelect.options[2]=new Option("Cover Letter","coverletter");
        statusSelect.options[3]=new Option("CV/Resume","cv");             
        break;
    case "other" :
        statusSelect.options.length = 3;
        statusSelect.options[0]=new Option("Select status","");
        statusSelect.options[1]=new Option("Type of Writing Not Listed","other1");
        statusSelect.options[2]=new Option("Other - additional services","other2");
        break;
    // 处理未选中指定分类的默认情况
    default:
        statusSelect.options.length = 1;
        statusSelect.options[0]=new Option("Select status","");
    }
    return true;
}

补充说明 #

如果后续需要调整各分类的选项数量，只需要对应修改statusSelect.options.length的赋值即可，不用修改其他逻辑。该方法仅删除超出目标长度的冗余选项，不会额外清空还需要复用的前N项，符合需求。

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