带有选择输入的 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);
            }

          })

        });

它的作用是从选项中获取选定的值并将其添加到 div 的类名中，如果选定的值发生变化，它会再次进行相同的操作。