求助：修复阿联酋燃油/柴油价格展示的jQuery交互问题

问题说明 #

实现阿联酋3种燃油类型+1种柴油的价格展示功能，支持按Letter/Gallon单位切换，但当前代码存在两个问题：

• 选择Diesel时，无法禁用第二个燃油类型下拉选择框
• 柴油价格无法正确显示，因为代码会拼接三个选择器类名（如.Diesel.E-Plus-91.Letter），但柴油的价格容器仅包含.Diesel.Letter或.Diesel.Galon类，导致匹配失败

修复后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='select_container'>
    <select id="fuel_category">
        <option value='Fuel'>Fuel</option>    
        <option value='Diesel'>Diesel</option>
    </select>
    
    <select id="fuel_type">
        <option value='E-Plus-91'>E-Plus 91</option>  
        <option value='Special-95'>Special 95</option>
        <option value='Super-98'>Super 98</option>
    </select>
    
    <select id="unit_type">
        <option value='Letter'>Letter</option> 
        <option value='Galon'>Galon</option>
    </select>
</div>

<div id='results_container'>
    <div class='Fuel E-Plus-91 Letter'>3.22 AED</div>
    <div class='Fuel Special-95 Letter'>3.30 AED</div>
    <div class='Fuel Super-98 Letter'>3.41 AED</div>
    <div class='Fuel E-Plus-91 Galon'>12.24 AED</div>
    <div class='Fuel Special-95 Galon'>12.54 AED</div>
    <div class='Fuel Super-98 Galon'>12.96 AED</div>
    <div class='Diesel Letter'>3.87 AED</div>
    <div class='Diesel Galon'>14.71 AED</div>
</div>

CSS #

#results_container > div { display: none; }

jQuery #

jQuery(function($){
    var $categorySelect = $('#fuel_category'),
        $typeSelect = $('#fuel_type'),
        $unitSelect = $('#unit_type'),
        $results = $('#results_container > div');

    // 处理选择器变更逻辑
    function updatePriceDisplay() {
        var category = $categorySelect.val(),
            type = $typeSelect.val(),
            unit = $unitSelect.val(),
            selector = '';

        // 控制燃油类型选择框的禁用状态
        $typeSelect.prop('disabled', category === 'Diesel');

        // 拼接选择器：Diesel模式下跳过燃油类型类
        selector += '.' + category;
        if (category !== 'Diesel') {
            selector += '.' + type;
        }
        selector += '.' + unit;

        // 显示匹配的价格容器，隐藏其他
        $results.filter(selector).show().siblings().hide();
    }

    // 绑定变更事件
    $('#select_container select').change(updatePriceDisplay);

    // 初始化页面时执行一次，确保默认显示正确
    updatePriceDisplay();
});

修复关键点 #

1. 下拉框状态控制：通过判断第一个选择框的value，动态设置第二个燃油类型下拉框的禁用/启用状态
2. 选择器逻辑优化：当选择Diesel时，拼接选择器时跳过燃油类型的类名，避免生成多余的选择器导致匹配失败
3. 初始化触发：页面加载时主动执行一次价格更新逻辑，确保默认状态下的显示正确

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