Javascript+HTML多下拉联动实现名片价格自动显示功能异常排查

故障原因 #

代码的问题集中在3个部分，全部修复后即可正常运行：

• JavaScript逻辑里的字符串匹配没有加引号，matte、gloss、square、round都是下拉框的value字符串值，不加引号会被JS识别为未定义的变量，直接触发报错导致函数不执行
• Corner Shape下拉框的默认选项属性写反，导致默认选中项的value为空，取值异常
• 没有加属性未选全的兜底逻辑，未选完所有参与计价的下拉框时会显示undefined，体验较差

修复步骤 #

1 修正Corner下拉框HTML代码 #

把原来的corner下拉框默认选项替换为下面的代码：

<option value="0" disabled selected>--Choose Corner--</option>

2 替换JS逻辑为修复后的代码 #

function calculateAmount() {  
    var q = document.getElementById("quantity");
    var f = document.getElementById("finishing");
    var c = document.getElementById("corner");
    var selFrst = q.options[q.selectedIndex].value;
    var selScnd = f.options[f.selectedIndex].value;
    var selThrd = c.options[c.selectedIndex].value;

    var tot_price = ''; // 兜底默认空值

    // 所有判断条件里的字符串都加引号
    if(selFrst == '1') {
        if(selScnd == 'matte') {
            if(selThrd == 'square') {
                tot_price = "25";
            } else if(selThrd == 'round') {
                tot_price = "30";
            }
        } else if(selScnd == 'gloss') {
            if(selThrd == 'square') {
                tot_price = "30";
            } else if(selThrd == 'round') {
                tot_price = "35";
            }
        }
    } else if(selFrst == '2') {
        if(selScnd == 'matte') {
            if(selThrd == 'square') {
                tot_price = "35";
            } else if(selThrd == 'round') {
                tot_price = "50";
            }
        } else if(selScnd == 'gloss') {
            if(selThrd == 'square') {
                tot_price = "40";
            } else if(selThrd == 'round') {
                tot_price = "55";
            }
        }
    } else if(selFrst == '3') {
        if(selScnd == 'matte') {
            if(selThrd == 'square') {
               tot_price = "45";
            } else if(selThrd == 'round') {
                tot_price = "70";
            }
        } else if(selScnd == 'gloss') {
            if(selThrd == 'square') {
                tot_price = "50";
            } else if(selThrd == 'round') {
                tot_price = "75";
            }
        }
    } else if(selFrst == '4') {
        if(selScnd == 'matte') {
            if(selThrd == 'square') {
                tot_price = "55";
            } else if(selThrd == 'round') {
                tot_price = "105";
            }
        } else if(selScnd == 'gloss') {
            if(selThrd == 'square') {
                tot_price = "60";
            } else if(selThrd == 'round') {
                tot_price = "115";
            }
        }
    }
    
    document.getElementById("tot_amount").value = tot_price;
}

补充说明 #

现有逻辑里没有把Orientation（排版方向）纳入价格计算，如果后续需要加这个维度的计价，记得给这个下拉框也加上onchange="calculateAmount()"触发事件，同时在JS逻辑里加上对应判断即可。

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