There is a select list

<select name="area"> <option value="rect1">Квадрат1</option> <option value="rect2">Квадрат2</option> <option value="rect3">Квадрат3</option> </select>

When changing the value in <select> to the SVG element <rect> with id rect1,2,3 , the highlight class must be added accordingly, and the element to which it was added has to be deleted.

    1 answer 1

     function Select(){ var val = $('select').val(); $('svg').filter('#'+ val).toggleClass('highlight') .siblings() .removeClass('highlight'); } $('select').on('change', function(){ Select(); }); $(window).on('load', function(){ Select(); }); 
     svg.highlight { width: 100px; height: 100px; background: #000; color: #fff; } select{ display: block; margin: 1rem; } 
     <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <select name="area"> <option value="rect1">Квадрат1</option> <option value="rect2">Квадрат2</option> <option value="rect3">Квадрат3</option> </select> <svg id="rect1" height="30" width="200"> <text x="0" y="15" fill="#fff">1</text> </svg> <svg id="rect2" height="30" width="200"> <text x="0" y="15" fill="#fff">2</text> </svg> <svg id="rect3" height="30" width="200"> <text x="0" y="15" fill="#fff">3</text> </svg>