CODEWITHSUNDEEP
jquerycss
Desferale
Desferale

Reputation: 1

addclass with a select input

I would like to add a class to a div. The name of ce class is an option of a select input. 

<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>

And a simple block 

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

If the option "dresseur" is selected, I want this : 

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

I tried:

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

Upvotes: 0

Views: 137

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22265

simply that

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>

Upvotes: 1

Elman Huseynov
Elman Huseynov

Reputation: 1147

Try like this:

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

And in your JS file:

$(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);
            }

          })

        });

What it does is takes selected value from the option and add it to a class name of div and if select value changes, it makes the same thing again.

Upvotes: 0

Related Questions