How to dynamically add class when I select option

Question

I want to dynamically add class for this selected class.

HTML :

<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>

Here is a content I wan't to add class:

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

JS :

$(document).ready(function(){

    var e = document.getElementById("paragraphSpaceOPtion");
    var strUser = e.options[e.selectedIndex].value;
    //console.log("option number " + strUser);

    //var masud = typeof(strUser);
    //console.log(masud);
    if(strUser == "00"){
        $(".content").addClass("option-no-00");
    }
    if(strUser == "05"){
        $(".content").addClass("option-no-05");
    }
    if(strUser == "07"){
        $(".content").addClass("option-no-07");
    }
    if(strUser == "10"){
        $(".content").addClass("option-no-10");
    }
    if(strUser == "15"){
        $(".content").addClass("option-no-15");
    }
    if(strUser == "20"){
        $(".content").addClass("option-no-20");
    }
})

I wan't to dynamically add class name when I select option.

Answer 1

How about a pure JS solution? Here's a dependency-free solution for JS lovers:

var selector = document.querySelector("#paragraphSpaceOPtion");
var oldClass=""; // define variable for previously selected class which is blank by default
//
selector.addEventListener("change", select);
   
function select() {

var content = document.querySelector(".content");

var newClass= "option-no-" + this.value;

if (oldClass){ //check if oldClass exists
content.classList.remove(oldClass); // remove the old class selected previously if any
}

content.classList.add(newClass); // add the selected class

oldClass = newClass; // newClass is going to be old class for the next select change

}

.option-no-00{
color:#990000;
}

.option-no-05{
color:#993388;
}

.option-no-07{
color:#990099;
}

.option-no-10{
color:#339955;
}

.option-no-05{
color:#990033;
}
.option-no-20{
color:#338822;
}

<form class="paragarph-space-form" action="">
<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

Answer 2

You can try this.

    $('#paragraphSpaceOPtion').on('change',function(){
        var value = $(this).val();
        var content = $('.content') 
        content.removeClass().addClass('content option-no-'+value)
    })

Answer 3

$(".content").removeClass().addClass("content option-no-"+$('#paragraphSpaceOPtion').find('option:selected').val());
$("#paragraphSpaceOPtion").on("change",function(){
  var val=$(this).find('option:selected').val();
  $(".content").removeClass().addClass("content option-no-"+val);
});

.option-no-00{ color:pink}
.option-no-05{ color:blue}
.option-no-07{ color:green}
.option-no-10{ color:red}
.option-no-15{ color:yellow}
.option-no-20{ color:gray}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="number" id="paragraphSpaceOPtion">
    <option selected class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>


<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

Answer 4

Since you want to change the classes when the choice change, you should listen on the change event of your select as the example below shown.

$('#paragraphSpaceOPtion').on('change', function() {
    var strUser = $(this).val(); //Get the choosen value
});

$(document).ready(function() {
  $('#paragraphSpaceOPtion').on('change', function() {
    var strUser = $(this).val();
    
    $(".content").attr('class','content');

    if (strUser == "00") {
      $(".content").addClass("option-no-00");
    }
    if (strUser == "05") {
      $(".content").addClass("option-no-05");
    }
    if (strUser == "07") {
      $(".content").addClass("option-no-07");
    }
    if (strUser == "10") {
      $(".content").addClass("option-no-10");
    }
    if (strUser == "15") {
      $(".content").addClass("option-no-15");
    }
    if (strUser == "20") {
      $(".content").addClass("option-no-20");
    }
  });
});

.option-no-00{
   background-color: green;
}
.option-no-05{
   background-color: red;
}
.option-no-07{
   background-color: yellow;
}
.option-no-10{
   background-color: grey;
}
.option-no-15{
   background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>

NOTE : I think the use of data-* attributes will be better in your case, check the example below.

Hope this helps.

The data-* attributes Suggestion :

$("#paragraphSpaceOPtion").on("change", function() {
  var _class = $(this).find(":selected").data('class');

  $(".content").attr('class', 'content '+_class);
}).change();

.option-no-00 {
  background-color: green;
}
.option-no-05 {
  background-color: red;
}
.option-no-07 {
  background-color: yellow;
}
.option-no-10 {
  background-color: gray;
}
.option-no-15 {
  background-color: blue;
}
.option-no-20 {
  background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="number" id="paragraphSpaceOPtion">
    <option data-class="option-no-00" value="00">00</option>
    <option data-class="option-no-05" value="05">05</option>
    <option data-class="option-no-07" value="07">07</option>
    <option data-class="option-no-10" value="10">10</option>
    <option data-class="option-no-15" value="15">15</option>
    <option data-class="option-no-20" value="20">20</option>
</select>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

Answer 5

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var strUser = this.value;

$("[class*='option-no']").removeClass (function (index, className) {
    return (className.match (/option-no.*/g) || []).join(' ');
});
    

    if(strUser == "00"){
        optionSelected.addClass("option-no-00");
    }
    if(strUser == "05"){
        optionSelected.addClass("option-no-05");
    }
    if(strUser == "07"){
        optionSelected.addClass("option-no-07");
    }
    if(strUser == "10"){
        optionSelected.addClass("option-no-10");
    }
    if(strUser == "15"){
        optionSelected.addClass("option-no-15");
    }
    if(strUser == "20"){
        optionSelected.addClass("option-no-20");
    }
    

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="paragarph-space-form" action="">
<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>

Answer 6

Here you go with one more solution

var prevVal;
$("#paragraphSpaceOPtion").on("change",function(){
  var val = $(this).find('option:selected').val();
  $(".content").removeClass(`content-${prevVal}`).addClass(`content-${val}`);
  prevVal = val;
});

.content-00{ color:pink}
.content-05{ color:blue}
.content-07{ color:green}
.content-10{ color:red}
.content-15{ color:yellow}
.content-20{ color:gray}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="number" id="paragraphSpaceOPtion">
  <option class="option-1" value="00">00</option>
  <option class="option-2" value="05">05</option>
  <option class="option-3" value="07">07</option>
  <option class="option-4" value="10">10</option>
  <option class="option-5" value="15">15</option>
  <option class="option-6" value="20">20</option>
</select>


<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

I've used ES6 template literals and used a variable to hold the previous selected value.

Hope this will help you.

Answer 7

You can make use of the change event to accomplish this.

$('select#paragraphSpaceOPtion').change(function(){
  
  var className = "content option-no-" + $(this).val();
  
  $('.content').removeClass().addClass(className); // remove existing classes and add required classes.
 
  });

.option-no-00{
background:#990000;
}

.option-no-05{
background:#999900;
}

.option-no-07{
background:#990099;
}

.option-no-10{
background:#009900;
}

.option-no-05{
background:#990033;
}
.option-no-20{
background:#338822;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="paragarph-space-form" action="">
<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

Answer 8

you need to watch the change of your select, and the put your code inside this :

  $('#paragraphSpaceOPtion').change(function(){
       //your code here
  });

here is a complete example:

$(document).ready(function(){

$("#paragraphSpaceOPtion").change(function() {
  var e = document.getElementById("paragraphSpaceOPtion");
  var strUser = e.options[e.selectedIndex].value;
  //console.log("option number " + strUser);

  //var masud = typeof(strUser);
  //console.log(masud);
  $(".content").attr('class','content');
  if(strUser == "00"){
      $(".content").addClass("option-no-00");
  }
  if(strUser == "05"){
      $(".content").addClass("option-no-05");
  }
  if(strUser == "07"){
      $(".content").addClass("option-no-07");
  }
  if(strUser == "10"){
      $(".content").addClass("option-no-10");
  }
  if(strUser == "15"){
      $(".content").addClass("option-no-15");
  }
  if(strUser == "20"){
      $(".content").addClass("option-no-20");
  }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="paragarph-space-form" action="">
<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>
here is a content i want to add class:

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>