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.
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');
})
})
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'); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.