Change SVG fill when selecting different options on a menu-CodePudding

So basicaly I'm building a map that will change segments colors according to the country people select on the menu. So selecting A will fill the SVG path from white to orange. Selecting B will only light the correspondent SVG path and so on.

This is my code:

<!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 value = $(this).val("countryA")
            $('#path1').css({ fill: "#FFA500" });

            const value = $(this).val("countryB")
            $('#path2').css({ fill: "#FFA500" });
        });
    </script>
    
</body>
</html>

If I only I have the Country A constant it will work fine and change path1 color. When I add countryB it simply stops working. How can I have more than 1 variable inside my country function.

CodePudding user response：

Set the css according to the selected option, that is the select value.

var countriesAndColors = {
  "countryA": {
    color: "red",
    selector: "#path1"
  },
  "countryB": {
    color: "blue",
    selector: "#path2"
  },
}

$('#country').on("change", function() {

  // reset all to transparent
  $('#path1, #path2').css({
    fill: "rgba(0,0,0,0)"
  });
  
  var value = $(this).val()
  if (!value) {
    return;
  }
  
  var {color, selector} = countriesAndColors[value]
  $(selector).css({
    fill: color
  });

});

<!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 value="">Select color</option>
    <option value="countryA">A</option>
    <option value="countryB">B</option>
  </select>
  <br>

  <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>


</body>