jQuery addClass example

Change class name on click in jQuery

HTML

<div class="container">
  <div class="btn1" data-target="1">
    Первый блок
  </div>
  <div class="btn2" data-target="2">
    Второй блок
  </div>
  <div class="btn3" data-target="3">
    Третий блок
  </div>
  <div class="btn4" data-target="4">
      Четвётрый блок
  </div>
</div>
<select>
  <option value="1">тест1</option>
  <option value="2">тест2</option>
  <option value="3">тест3</option>
  <option value="4">тест4<option>
<select>

CSS

.container {
  display: flex;
}
.btn1 {
  width: 150px;
  height : 150px;
  background: red;
  margin-right: 10px; 
  cursor: pointer;
  margin-bottom: 20px;
}

.btn2 {
  width: 150px;
  height : 150px;
  background: red;
  margin-right: 10px; 
  cursor: pointer;
}

.btn3 {
  width: 150px;
  height : 150px;
  background: red;
  margin-right: 10px; 
  cursor: pointer;
}

.btn4 {
  width: 150px;
  height : 150px;
  background: red;
  cursor: pointer;
}

JavaScript

$('[class^="btn"]').click(function(){
  var target = $(this).data('target');
  $('select option').removeAttr('selected');
  $('select option[value="'+target+'"]').attr("selected", "selected");
})