Как проверить, является ли поле обнуляемым или нет, и если это не так, сделать его обнуляемым, чтобы скрыть выпадающий

Question

Я новичок в jQuery и добавляю проверку. У меня есть выпадающий тип действия, который имеет два значения APPROVAL и INFORMATION. Когда мы выбираем APPROVAL, тогда все поля или выпадающие поля обязательны для заполнения. Если мы выберем INFORMATION, тогда assigneTo dropDown должен скрыться. Я хочу установить эти значения в нуль, потому что когда мы отправляем форму, она не отправляется, потому что выпадающий список assigneTo является обязательным полем.

Как я могу установить значение выпадающего списка assigneeTo на ноль, когда мы выбираем INFORMATION actionType? Как сделать эти поля обнуляемыми?

function showDiv(value) {
  console.log(value);
  if (value == 'APPROVAL') {
    $('.hiddenName').show();
    $(".hiddenName").attr('data-validation', true);
  }

  if (value == 'INFORMATION') {
    $('.hiddenName').hide();
    /* $(".hiddenName").removeAttr('data-validation', false); */
    $(".hiddenName").attr('data-validation', false);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row marg-bottom-10">
  <div class="col-md-3 col-xs-12 col-sm-3">
    <label class="marg-top-10">[[#{operation.action}]]</label>
  </div>
  <div class="col-md-5 col-xs-12 col-sm-5">
    <div class="form-group marg-none">
      <select onchange="showDiv(this.value)" id="actions" th:field="*{actionType}" class="custom-select form-control">
        <option value="">[[#{select.action.type}]]</option>
        <option th:each="action: ${actionTypeList}" th:value="${action}" th:text="${action.name}">
      </select>
    </div>
  </div>
</div>
<div class="row marg-bottom-10 hiddenName" hidden="hidden">
  <div class="col-md-3 col-xs-12 col-sm-3 ">
    <label class="marg-top-10">[[#{operation.assign.to}]]</label>
  </div>
  <div class="col-md-5 col-xs-12 col-sm-5">
    <select id="idAssignToSelect" data-placeholder="Select Assign To" th:field="*{assignToId}" class="chosen-select" tabindex="6" data-validation="required">
      <option value=""></option>
      <optgroup th:each="user : ${userList}" th:label="${user.companyName}">
        <option th:each="user1 : ${user.userList}" th:value="${user1.id}" th:utext="${user1.userName}" />
      </optgroup>
    </select>
  </div>
  <div class="row marg-bottom-10 ">
    <div class="col-md-3 col-xs-12 col-sm-3">
      <label class="marg-top-10">[[#{user.action.date}]]</label>
    </div>
    <div class="col-md-5 col-xs-12 col-sm-5">
      <div class="input-prepend input-group">
        <input id="idForDate" th:field="*{actionDate}" class="document-datepickerInbetween48hrDate form-control for-clander-view day" placeholder="Pick a Date" type="text" data-date-format="dd/mm/yyyy" data-validation="required">
      </div>
    </div>
  </div>