基于机场终端下拉选择动态调整服务下拉框选项的技术问询

先直接说结论：当前代码没有完全匹配需求，它只处理了「全服务航站楼」和「部分服务航站楼」的场景，但完全漏掉了「无可用服务航站楼」的处理逻辑，而且还存在潜在的报错风险。下面是具体的问题点和优化方案：

当前代码的核心问题 #

• 缺少「无服务航站楼」的判断分支，无法实现“移除选项并提示无服务”的需求
• getOptions函数在传入空值或不存在的airportvalue时，会因为options为undefined导致循环报错
• 没有针对无服务场景做UI上的提示和交互限制（比如禁用下拉框）

优化后的完整代码 #

<!-- 保留原HTML结构，新增无服务航站楼示例 -->
//form one
<select class="req input-disabled" name="ddlairport_terminal" id="ddlairport_terminal">
<option value="">Airport terminal</option>
<option value="92|138">Suvarnabhumi International</option>
<option value="92|135">Suvarnabhumi Domestic</option>
<option value="93|138">Don Mueang International</option>
<option value="93|135">Don Mueang Domestic</option>
<option value="94|140">Phuket Domestic (No Service)</option>
</select>
<select class="req input-disabled" name="ddltransit" id="ddltransit">
<option value="">Choose a service</option>
</select>
//form 2
<select class="req input-disabled" id="ret_ddlairport_terminal" name="ret_ddlairport_terminal">
<option value="">Airport terminal</option>
<option value="92|138">Suvarnabhumi international</option>
<option value="92|135">Suvarnabhumi domestic</option>
<option value="93|138">Don muang international</option>
<option value="93|135">Don muang domestic</option>
<option value="94|140">Phuket Domestic (No Service)</option>
</select>
<select class="req input-disabled" name="ret_ddltransit" id="ret_ddltransit">
<option value="">Choose a service</option>
</select>

<script>
// airport service tab
var allservices = '<option value="">Choose a service</option><option value="110">Arrival</option><option value="111">Departure</option><option value="Gate to gate">Gate to gate (Transit)</option>';
// 新增：完全无服务的航站楼数组
var noserviceairports = ["94|140"];
var partialserviceairports = ["93|135","93|138"];
var airportservicemapping = {"93|135":["110","Gate to gate"],"93|138":["110","Gate to gate"]};
var servicenamemapping = {"110":"Arrival","111":"Departure","Gate to gate": "Gate to gate (Transit)"};

$(document).ready(function(){
    // 提取重复逻辑为公共函数，避免代码冗余
    function handleTerminalChange(terminalSelect, serviceSelect) {
        var selectedval = $(terminalSelect).val();
        var $serviceSelect = $(serviceSelect);
        
        if (!selectedval) {
            // 未选择航站楼时，重置为初始状态
            $serviceSelect.html('<option value="">Choose a service</option>').prop('disabled', false);
            return;
        }
        
        if (noserviceairports.indexOf(selectedval) > -1) {
            // 无服务场景：替换为提示选项，禁用下拉框
            $serviceSelect.html('<option value="">No available service</option>').prop('disabled', true);
        } else if (partialserviceairports.indexOf(selectedval) > -1) {
            // 部分服务场景：加载对应服务选项
            $serviceSelect.html(getOptions(selectedval)).prop('disabled', false);
        } else {
            // 全服务场景：加载所有服务选项
            $serviceSelect.html(allservices).prop('disabled', false);
        }
    }

    // 出发航站楼事件绑定
    $("select#ddlairport_terminal").on('change', function(){
        handleTerminalChange(this, "#ddltransit");
    });

    // 返回航站楼事件绑定
    $("select#ret_ddlairport_terminal").on('change', function(){
        handleTerminalChange(this, "#ret_ddltransit");
    });

    // 优化getOptions函数，增加容错处理
    function getOptions(airportvalue) {
        var options = airportservicemapping[airportvalue] || [];
        var optionshtml = '<option value="">Choose a service</option>';
        
        options.forEach(function(key) {
            optionshtml += `<option value="${key}">${servicenamemapping[key] || key}</option>`;
        });
        
        return optionshtml;
    }
});
</script>

关键改动说明 #

• 新增无服务配置：添加noserviceairports数组专门存储无服务航站楼，后续维护只需修改这个数组即可
• 重构重复逻辑：把两个下拉框的事件处理合并为公共函数，减少冗余代码，方便后续修改
• 完善场景分支：新增无服务场景的处理，替换下拉框内容为提示文本并禁用，完全匹配需求
• 容错机制优化：给getOptions函数添加默认值，避免找不到映射时出现报错；同时增加服务名称的兜底显示，防止映射缺失时显示异常
• 交互体验提升：根据不同场景动态启用/禁用服务下拉框，引导用户正确操作

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