0

Есть список select

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

При изменении значения в <select> к элементу SVG <rect> с id rect1,2,3 соответственно должен добавлять класс highlight, а у элемента, к которому он был добавлен раннее удаляться.

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.