[SOLVED] conditional logic for css if a selection field (with meta_key) have specific value using ajax/jquery

conditional logic for css if a selection field (with meta_key) have specific value using ajax/jquery

I have a selection field with a meta_key (for example:'text_style') and 3 values (for example:'normal', 'bold', 'italic'), and an element after it (for example: a div with a text in it).

Now i need to update "changeable-class" for each values, when a user select them without reloading page (I can do it).

How do it using AJAX (or any other way that is simpler and faster in loading)? Do I need to use meta_key to do it really?

Regard

Solution

This is my solution (thanks and regard to @moped):

//JavaScript
document.getElementById('StyleSelection').onchange = function(){
    document.getElementById('myDiv').className = this.value;
};

/* css */

.normal { font-style: normal;} 
.bold {font-weight: bold;} 
.italic {font-style: italic;}

<!-- html -->

<form id="myform" action="#"> 
    <select id="StyleSelection"> 
      <option value="">Please select...</option>
      <option value="normal">Normal</option>
      <option value="bold">Bold</option>
      <option value="italic">Italic</option>
    </select> 
</form> 

<div id="myDiv">This is myBox</div>

If every body have a solution using meta_key, I really thank him... Regard