условная логика для css, если поле выбора (с meta_key) имеет конкретное значение, используя ajax / jquery

Question

У меня есть поле выбора с мета-ключом (например, «text_style») и 3 значениями (например: «обычный», «полужирный», «курсив») и элементом после него (например, divс текстом в нем).

Теперь мне нужно обновить «changeable-class» для каждого значения, когда пользователь выбирает их без перезагрузки страницы (я могу это сделать).

Как сделатьэто с помощью AJAX (или любой другой способ, который проще и быстрее при загрузке)?Нужно ли использовать meta_key, чтобы сделать это на самом деле?

Regard

Answer 1

Это мое решение (спасибо и в отношении @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> 

Если у каждого тела есть решение с использованием meta_key, я действительно благодарю его ... С уважением