通过下拉菜单设置SVG元素的样式

Question

I have a SVG floor plan, and I trying to add a drop down menu that will let people select a location to have it appear on the map. I have very little experience with jQuery, but this is what I've been able to put together from code I've found while googling:

 $(function() { $('select').change(function() { var s = $(this).find('option:selected').text(); if(s == "Left") { $('#rleft').css('fill', 'green'); } else if(s == "Middle") { $('#rmiddle').css('fill', 'orange') } else if(s == "Right") { $('#rright').css('fill', 'red') } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value="blank">Select a Location</option> <option value="left">Left</option> <option value="middle">Middle</option> <option value="right">Right</option> </select> <svg height="170" width="500"> <rect id="rleft" x="10" y="10" width="150" height="150" fill="#FFFFFF" stroke="#000000" /> <rect id="rmiddle" x="170" y="10" width="150" height="150" fill="#FFFFFF" stroke="#000000" /> <rect id="rright" x="330" y="10" width="150" height="150" fill="#FFFFFF" stroke="#000000" /> </svg> 

As it is now, the drop down will change colors, but I'd like the previous selection to be cleared when a new option is selected. Only one square should have color at a time. I have a feeling it is something I'm overlooking. I would appreciate any help. Thank you.

Answer 1

You have to remove the style (eg set fill:none) for the other elements when the value changes.

$(function() {
  $('select').change(function() {
    var s = $(this).val();
    $('#rleft').css('fill', s == "left"?'green':'none');
    $('#rmiddle').css('fill', s == "middle"?'orange':'none');
    $('#rright').css('fill', s == "right"?'red':'none');
  })
})

Answer 2

When one of the squares is selected you need to reset the color of the other squares to #FFF.

Something like this:

 if (s == "Left") { $('#rleft').css('fill', 'green'); // set colors back to white $('#rmiddle').css('fill', '#FFF'); $('#rright').css('fill', '#FFF'); }