Cómo agregar dinámicamente class cuando selecciono la opción

Quiero agregar dinámicamente la class para esta class seleccionada.

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> 

Aquí hay un contenido que quiero agregar 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"); } }) 

Quiero agregar dinámicamente el nombre de class cuando selecciono la opción.

Aquí tienes una solución más

 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:networking} .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> 
 $(".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:networking} .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> 
 $('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> 

necesitas ver el cambio de tu selección, y poner tu código dentro de esto:

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

aquí hay un ejemplo completo:

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

Dado que desea cambiar las classs cuando cambie la opción, debe escuchar el evento de change de su select como se muestra en el siguiente ejemplo.

 $('#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: networking; } .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> 

Puede hacer uso del evento de change para lograr esto.

 $('select#paragraphSpaceOPtion').change(function(){ var className = "content option-no-" + $(this).val(); $('.content').removeClass().addClass(className); // remove existing classes and add requinetworking 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> 

¿Qué tal una solución JS pura? Aquí hay una solución libre de dependencia para los amantes de JS :

 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> 

Puedes probar esto.

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