选择菜单选项切换SVG填充色时多变量逻辑失效问题求助

你的代码失效核心原因有三个：

• 重复声明const value，违反JavaScript语法规则，直接导致脚本报错停止执行
• 错误使用$(this).val("xxx")：这个写法是设置下拉框的值，而非获取当前选中项的value，正确获取应该用$(this).val()
• 缺少条件判断逻辑，不管选中哪个选项，都会同时执行两个路径的颜色设置，逻辑完全混乱

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <select name="country" id="country">
        <option>Select color</option>
        <option value="countryA">A</option>
        <option value="countryB">B</option>
    </select>

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
        <path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
       C407.227,134.613,291.451,51.919,291.451,51.919z" />

        <path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
        c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
    </svg>

    <script type="text/javascript">
        $('#country').on("change", function () {
            // 获取当前选中的选项值
            const selectedValue = $(this).val();
            
            // 先把所有路径恢复为默认白色，避免多选项叠加颜色
            $('#path1, #path2').css('fill', '#FFFFFF');
            
            // 根据选中值设置对应路径的颜色
            if (selectedValue === 'countryA') {
                $('#path1').css('fill', '#FFA500');
            } else if (selectedValue === 'countryB') {
                $('#path2').css('fill', '#FFA500');
            }
        });
    </script>
    
</body>
</html>

关键修复点说明 #

1. 正确获取选中值：用$(this).val()获取当前下拉框选中的value，而非设置值
2. 避免重复声明变量：只声明一次selectedValue存储选中值
3. 条件分支控制逻辑：通过if-else判断选中值，仅对对应路径设置橙色
4. 重置默认颜色：每次切换时先把所有路径恢复白色，确保同一时刻只有选中的区域是橙色

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