Click svg path and change option value on a select component - Jquery

motspeed
November 8, 2022
129 views
0 votes
2 Answers

Currently I have some code that when selecting a value from a dropdown list will paint a specific path of a svg image.

var paths1 = {
  "https://www.google.com": {
    color: "#eb8c00",
    selector: "#path1"
  },
  "https://www.yahoo.com": {
    color: "#eb8c00",
    selector: "#path2"
  },
}

$('#path').on("change", function() {
  $('#path1, #path2').css({
    fill: "#FFFFFF"
  });

  var value = $(this).val()
  
  if (!value) {
    return;
  }

  var {
    color,
    selector
  } = paths1[value]
  
  $(selector).css({
    fill: color
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div name="svg">
  <svg id="Layer_1" version="1.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>
</div>

<select id="path" name="path" class="pathSelector">
  <option value="">Select Path</option>
  <option value="https://www.google.com">Google</option>
  <option value="https://www.yahoo.com">Yahoo</option>
</select>

<div>
  <input 
    type="button" 
    class="selectbutton" 
    value="Select" 
    onClick="window.open(path.value,'newtab'+path.value)">
</div>

It works fine, as the button will also redirect to a different page.Now I need to be able to the reverse. I want to click on a path and the dropdown selector will also change. Clicking on path1 will select Google and clicking on path2 will select Yahoo from my dropdown list.

How can I achieve this?

Answers

here is a code that you can check out as an example. It must help. Good luck.

      function SelectADropdownItem(id, val) {
        var d = document.getElementById(id);
        for (var i = 0; i < d.length; i++) {
          if (d[i].value == val) {
            d[i].selected = true;
          } else {
            d[i].selected = false;
          }
        }
      }

<!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>
  </head>
  <body>
    <img
      onclick="SelectADropdownItem('design-dropdown','Fleur')"
      src="//www.willmaster.com/library/images/ImageClickSelects/flower.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Flower design"
    />
    <img
      onclick="SelectADropdownItem('design-dropdown','Nine Patch')"
      src="//www.willmaster.com/library/images/ImageClickSelects/ninepatch.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Nine patch design"
    />
    <img
      onclick="SelectADropdownItem('design-dropdown','Pink Gate')"
      src="//www.willmaster.com/library/images/ImageClickSelects/pinkgate.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Pink gate design"
    />
    <br />
    <img
      onclick="SelectADropdownItem('design-dropdown','Sand Dollar')"
      src="//www.willmaster.com/library/images/ImageClickSelects/sanddollar.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Sand dollar design"
    />
    <img
      onclick="SelectADropdownItem('design-dropdown','Sandria')"
      src="//www.willmaster.com/library/images/ImageClickSelects/sandria.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Sandria design"
    />
    <img
      onclick="SelectADropdownItem('design-dropdown','Blue Wheel')"
      src="//www.willmaster.com/library/images/ImageClickSelects/wheel.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Blue wheel design"
    />

    <select id="design-dropdown">
      <option>Select here or click a pattern above.</option>
      <option value="Fleur">Fleur</option>
      <option value="Nine Patch">Nine Patch</option>
      <option value="Pink Gate">Pink Gate</option>
      <option value="Sand Dollar">Sand Dollar</option>
      <option value="Sandria">Sandria</option>
      <option value="Blue Wheel">Blue Wheel</option>
    </select>

  </body>
</html>

To achieve this, you could define a click event handler:

$('#Layer_1 path').on("click", function() {...});

and use a for in loop to compare the selector values in the paths1 array with the ID of the clicked path:

for (key in paths1) {
  if (paths1[key].selector == '#' + this.id) {...}
}

If you found a match, you can use the key to select the option tag and assign the selected property to it:

$('option[value="' + key + '"]').prop('selected', true);

All together:

$('#Layer_1 path').on("click", function() {
  for (key in paths1) {
    if (paths1[key].selector == '#' + this.id) {
      $('option[value="' + key + '"]').prop('selected', true);
    }
  }
});

You could also change the colors similar to the other event handler:

$('#Layer_1 path').on("click", function() {
  for (key in paths1) {
    if (paths1[key].selector == '#' + this.id) {
      $('option[value="' + key + '"]').prop('selected', true);
      
      $('#path1, #path2').css({
        fill: "#FFFFFF"
      });
  
      $(this).css({fill: paths1[key].color});
    }
  }
});

Working example:

var paths1 = {
  "https://www.google.com": {
    color: "#eb8c00",
    selector: "#path1"
  },
  "https://www.yahoo.com": {
    color: "#eb8c00",
    selector: "#path2"
  },
}

$('#path').on("change", function() {
  $('#path1, #path2').css({
    fill: "#FFFFFF"
  });

  var value = $(this).val()
  
  if (!value) {
    return;
  }

  var {
    color,
    selector
  } = paths1[value]
  
  $(selector).css({
    fill: color
  });
});

$('#Layer_1 path').on("click", function() {
  for (key in paths1) {
    if (paths1[key].selector == '#' + this.id) {
      $('option[value="' + key + '"]').prop('selected', true);
      
      $('#path1, #path2').css({
        fill: "#FFFFFF"
      });
  
      $(this).css({fill: paths1[key].color});
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div name="svg">
  <svg id="Layer_1" version="1.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>
</div>

<select id="path" name="path" class="pathSelector">
  <option value="">Select Path</option>
  <option value="https://www.google.com">Google</option>
  <option value="https://www.yahoo.com">Yahoo</option>
</select>

<div>
  <input 
    type="button" 
    class="selectbutton" 
    value="Select" 
    onClick="window.open(path.value,'newtab'+path.value)">
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Click svg path and change option value on a select component – Jquery

Answers