score:1

Accepted answer

I suggest two different approaches. One for the two cases when you are changing the style of the polygons, and one for the other cases where you are adding another element to the group.

In the first case, the simplest approach is to just toggle a class on the polygon. Click once and the class is added. Click again and the class (and its associated style) is removed.

else if (strUser == "gif")
{
  $(evt.target).toggleClass("gif");
}

In the second case, just give the element, that you add, a class. Then on click check whether the group contains an element with that class. If it does, remove the element. Otherwise add it as normal.

if (strUser == "amf")
{
  // Find the group that contains the polygon that was clicked on
  var group = evt.target.parentNode;
  // If the group already contains the "amf" element, then remove it
  var amfShape = $(group).find(".amf");
  if (amfShape.length > 0)
  {
    amfShape.remove();
  }
  else
  {
    // Append the SVG element
  }
}

Working example

$('polygon').click(function(evt) {
  var e = document.getElementById("kondisi");
  var strUser = e.options[e.selectedIndex].value;
  if (strUser == "amf")
  {
    // Find the group that contains the polygon that was clicked on
    var group = evt.target.parentNode;
    // If the group already contains the "amf" element, then remove it
    var amfShape = $(group).find(".amf");
    if (amfShape.length > 0)
    {
      amfShape.remove();
    }
    else
    {
      // Get the bounding box of the group
      var bbox = group.getBBox();
      // Add a triangle to the group
      var svgns = "http://www.w3.org/2000/svg";
      var shape = document.createElementNS(svgns, "polygon");
      shape.setAttribute("points", "-10,0, 10,0, 0,15"); // triangle centered on x=0
      shape.setAttributeNS(null, "fill", "black");
      var xPos = bbox.x + bbox.width / 2; // Horizontal centre of the bbox
      var yPos = bbox.y + bbox.height; // Bottom of the group bbox
      shape.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
      shape.setAttribute("class", "amf");
      group.appendChild(shape);
    }
  }
  else if (strUser == "gif")
  {
    $(evt.target).toggleClass("gif");
  }
  else if (strUser == "fmc")
  {
    $(evt.target).toggleClass("fmc");
  }
  else if (strUser == "mis")
  {
    var group = evt.target.parentNode;
    // If the group already contains the "mis" element, then remove it
    var misShape = $(group).find(".mis");
    if (misShape.length > 0)
    {
      misShape.remove();
    }
    else
    {
      // Get the bounding box of the group
      var bbox = group.getBBox();
      // Add a triangle to the group
      var svgns = "http://www.w3.org/2000/svg";
      var line = document.createElementNS(svgns, "path");
      line.setAttribute('d', 'M -6,-13 L 6,13 M 6,-13 L -6,13');
      line.setAttribute("fill", "none");
      line.setAttribute("stroke", "black");
      var xPos = bbox.x + bbox.width / 2; // Horizontal centre of the bbox
      var yPos = bbox.y + 10;              // Middle of the polygons
      line.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
      line.setAttribute("class", "mis");
      group.appendChild(line);
    }
  }

});
.gif {
  fill: #00ff33;
}

.fmc {
  stroke-width: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="svgselect" style="width: 610px; height: 230px;">
  <!-- background-color:red -->
  <svg version="1.1" height="100%" width="100%">
    <g transform="scale(1.5)" id="gmain">

      <g id="P17" transform="translate(25,0)">
        <polygon points="5,5  15,5  15,15   5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
        <polygon points="0,0  20,0  15,5  5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
        <polygon points="5,15   15,15   20,20   0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B17"></polygon>
        <polygon points="15,5   20,0  20,20   15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
        <polygon points="0,0  5,5   5,15  0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
        <text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">17</text>
      </g>
      <g id="P16" transform="translate(50,0)">
        <polygon points="5,5  15,5  15,15   5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
        <polygon points="0,0  20,0  15,5  5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
        <polygon points="5,15   15,15   20,20   0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B16"></polygon>
        <polygon points="15,5   20,0  20,20   15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
        <polygon points="0,0  5,5   5,15  0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
        <text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">16</text>
      </g>
      <g id="P15" transform="translate(75,0)">
        <polygon points="5,5  15,5  15,15   5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
        <polygon points="0,0  20,0  15,5  5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
        <polygon points="5,15   15,15   20,20   0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B15"></polygon>
        <polygon points="15,5   20,0  20,20   15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
        <polygon points="0,0  5,5   5,15  0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
        <text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">15</text>

      </g>
    </g>
  </svg>

</div>
<select id="kondisi">
  <option selected="selected" value="amf">amf</option>
  <option value="gif">gif</option>
  <option value="fmc">fmc</option>
  <option value="mis">mis</option>
</select>

score:0

I examined your fiddle to get a better understanding of what you were trying to accomplish. From what I understand, it seems that you're looking for toggle functionality based on the option you select from the dropdown.

So I used the code from your fiddle to create a working snippet here. I was able to get the toggle functionality working for the first three selections, amf, gif and fmc. I wasn't sure what you were trying to do with mis so I didn't modify anything there.

As it turns out, you don't really need the ID of the click target since you can get a handle to the polygon from $(evt.target). Once you have that you can modify any attributes, or in certain cases hide the clicked polygon element.

Another important thing of note. Because the triangles in the amf option were dynamically created, they didn't exist in the DOM when the document was ready. So in order to bind a click handler to them I had to change $('polygon').click(function(evt) to $(document).on("click", "polygon", function(evt).

$(document).on("click", "polygon", function(evt) {
  var e = document.getElementById("kondisi");
  var strUser = e.options[e.selectedIndex].value;
  if (strUser == "amf") {
    if ($(evt.target).attr("points") == "-10,0, 10,0, 0,15") {
      $(evt.target).hide();
    } else {
      // Find the group that contains the polygon that was clicked on
      var group = evt.target.parentNode;
      // Get the bounding box of the group
      var bbox = group.getBBox();
      // Add a triangle to the group
      var svgns = "http://www.w3.org/2000/svg";
      var shape = document.createElementNS(svgns, "polygon");
      shape.setAttribute("points", "-10,0, 10,0, 0,15"); // triangle centered on x=0
      shape.setAttributeNS(null, "fill", "black");
      var xPos = bbox.x + bbox.width / 2; // Horizontal centre of the bbox
      var yPos = bbox.y + bbox.height; // Bottom of the group bbox
      shape.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
      group.appendChild(shape);
    }
  } else if (strUser == "gif") {
    if ($(evt.target).css("fill") == "rgb(255, 255, 255)") {
      $(evt.target).css({
        fill: "#00ff33" // Green
      });
    } else {
      $(evt.target).css({
        fill: "#ffffff" // White
      });
    }
  } else if (strUser == "fmc") {
    if ($(this).attr("stroke-width") === "2") {
      $(this).attr("stroke-width", 0.5);
    } else {
      $(this).attr("stroke-width", 2);
    }
  } else if (strUser == "mis") {
    var group = evt.target.parentNode;
    // Get the bounding box of the group
    var bbox = group.getBBox();
    // Add a triangle to the group
    var svgns = "http://www.w3.org/2000/svg";
    var line = document.createElementNS(svgns, "line");
    var line2 = document.createElementNS(svgns, "line");
    line.setAttribute('id', 'line');
    line.setAttribute('x1', '0');
    line.setAttribute('y1', '0');
    line.setAttribute('x2', '-11');
    line.setAttribute('y2', '-25');
    line.setAttribute("stroke", "black")
    line2.setAttribute('id', 'line2');
    line2.setAttribute('x1', '-11');
    line2.setAttribute('y1', '0');
    line2.setAttribute('x2', '0');
    line2.setAttribute('y2', '-25');
    line2.setAttribute("stroke", "black");
    var xPos = bbox.x + bbox.width / 1.3; // Horizontal centre of the bbox
    var yPos = bbox.y + bbox.height / 2; // Bottom of the group bbox
    line2.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
    line.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
    group.appendChild(line2);
    group.appendChild(line);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <select id="kondisi">
    <option selected="selected" value="amf">amf</option>
    <option value="gif">gif</option>
    <option value="fmc">fmc</option>
    <option value="mis">mis</option>
  </select>
</div>

<div id="svgselect" style="width: 610px; height: 230px;">
  <!-- background-color:red -->
  <svg version="1.1" height="100%" width="100%">
    <g transform="scale(1.5)" id="gmain">

      <g id="P17" transform="translate(25,0)">
        <polygon points="5,5  15,5  15,15   5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
        <polygon points="0,0  20,0  15,5  5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
        <polygon points="5,15   15,15   20,20   0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B17"></polygon>
        <polygon points="15,5   20,0  20,20   15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
        <polygon points="0,0  5,5   5,15  0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
        <text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">17</text>
      </g>
      <g id="P16" transform="translate(50,0)">
        <polygon points="5,5  15,5  15,15   5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
        <polygon points="0,0  20,0  15,5  5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
        <polygon points="5,15   15,15   20,20   0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B16"></polygon>
        <polygon points="15,5   20,0  20,20   15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
        <polygon points="0,0  5,5   5,15  0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
        <text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">16</text>
      </g>
      <g id="P15" transform="translate(75,0)">
        <polygon points="5,5  15,5  15,15   5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
        <polygon points="0,0  20,0  15,5  5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
        <polygon points="5,15   15,15   20,20   0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B15"></polygon>
        <polygon points="15,5   20,0  20,20   15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
        <polygon points="0,0  5,5   5,15  0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
        <text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">15</text>

      </g>
    </g>
  </svg>

</div>


Related Query

More Query from same tag