Есть ли способ сделать это с помощью базовой JS DOM?

Question

Мне нужно применить / удалить поле ввода в соответствии с выбором пользователя в отдельной выпадающей форме - но я не могу понять, как нацелить класс ввода.

Мне нужно добавить / удалить класс 'pageRequired' из этого ввода:

<input  type="text" title="Company Required" name="customfields-tf-2-tf" class="inputclass pageRequired textInput" id="customfields-tf-2-tf" />

Когда пользователь выбирает один из двух вариантов в раскрывающемся поле. Например:

<select class="dropdown" name="customfields-s-1-s" id="customfields-s-1-s" >
<option value="Owner"<?php if(in_array("Owner",$temp_values)) { ?> selected='selected'<?php } ?>> Owner</option>
<option value="Broker"<?php if(in_array("Broker",$temp_values)) { ?> selected='selected'<?php } ?>> Broker</option>
</select>

Если пользователь выбирает брокер, то я хочу добавить класс pageRequired в первое поле ввода и удалить его, если пользователь выбрал владельца.

РЕДАКТИРОВАТЬ - Хорошо, вот код, с которым я работаю:

<script type="text/javascript">
function changeClass(myDropdown) {
   if (#customfields-s-1-s.selectedIndex == 1 ) {
       $('#customfields-tf-2-tf').addClass('pageRequired');
   }
   else {
      $('#customfields-tf-2-tf').removeClass('pageRequired');
   }
}
</script>

Answer 1

Если вы не хотите использовать JQuery, вы также можете сделать это с помощью простого JavaScript:

<script>
function changeClass(obj) {
  var input = document.getElementById("customfields-tf-2-tf");
  if(obj.value == 'Broker') {
    input.className = input.className.replace('pageRequired','');
  }
  else if(obj.value == 'Owner') {
    input.className = input.className + ' pageRequired';
  }
}
</script>

<input title="Company Required" id="customfields-tf-2-tf" class="inputclass pageRequired textInput" type="text">
<br>
<select name="matt" onchange="changeClass(this)">
<option value="Owner">Owner</option>
<option value="Broker">Broker</option>
</select>

Answer 2

Это можно сделать очень просто с помощью jquery:

Просто добавьте событие onchange в выпадающий список, а затем вызовите функцию, которая либо удаляет класс, либо добавляет его в зависимости от выпадающего списка

<select class="dropdown" name="customfields-s-1-s" id="customfields-s-1-s" onchange="javascript:changeClass(this);" >

function changeClass(myDropdown) {
   if (myDropdown.selectedIndex == 1 ) {
       $('#customfields-tf-2-tf').addClass('pageRequired');
   }
   else {
      $('#customfields-tf-2-tf').removeClass('pageRequired');
   }
}

Вот ссылки на использование:

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/