addclass с выбранным входом

Question

Я хотел бы добавить класс в div. Имя класса ce является опцией выбора ввода.

<form onsubmit="return creationMessage(this)"
      target="_blank"
      name="NomForm"
      method="post"
      action="/posting.forum"
      id="am">

  <div class="fond">
    <div class="faction">Présentation</div>
    <select id="ttype" name="ttype" class="obligatoire" focus>
      <option>dresseur</option>
      <option>ligue</option>
    </select>
  </div>
</form> 

И простой блок

<div class="faction"></div>

Если выбрана опция "dresseur", я хочу это:

<div class="faction dresseur"></div>

Я пробовал:

$('select').on('change', function() {
  var colorSelect = $(this).val();
  $('.faction').addClass('colorSelect');
});

Answer 1

просто что

const amForm     = document.querySelector('form#am')
  ,   divFaction = amForm.querySelector('div.faction');

amForm.ttype.oninput = _ => divFaction.className = `faction ${amForm.ttype.value}`;

.dresseur {color: red;}
.ligue { color: blue; }

<form id="am" >

  <div class="faction">Présentation</div>

  <select name="ttype" class="obligatoire">
    <option value="dresseur">dresseur</option>
    <option value="ligue">ligue</option>
  </select>

</form>

Answer 2

Попробуйте вот так:

<div class="faction"></div>
<select name="type" class="obligatoire">        
  <option selected="selected">dresseur</option>
  <option>ligue</option>
</select>

А в вашем JS файле:

$(function(){

          var exist_val = $(".obligatoire").val();
          $(".faction").addClass(exist_val);


          $(".obligatoire").on('change', function(){
            var current_value = $(this).val();
            if(!$(".faction").hasClass(current_value)){
              $(".faction").addClass(current_value);
            }

          })

        });

То, что он делает, принимает выбранное значение из опции и добавляет его к имени класса of div, и если значение select изменяется, оно снова делает то же самое.