Перезаписать значение раскрывающегося списка без обновления страницы

Question

Я разрабатываю раскрывающийся список дерева решений, в котором выбор может изменяться в зависимости от решения пользователя.Я смог отобразить правильные результаты, используя цикл с помощью selectedIndex , если не было внесено никаких изменений в выборку, но когда я изменил его на другой выбор, это время, когда я получил проблему

Я уже пытался очистить сохраненный массив, выполнив result = [] и этот result = 0 , но после этого он не будет повторно захватывать выбранный выпадающий список, даже если создал отдельную кнопку для отображения результата.и очистка результата.

Пример сценария:

Я выбираю A в вопросе 1, затем A-1 в вопросе 2, когда я нажимаю на Показать результат, он будет отображать правильный выбор.Проблема возникает, когда я изменяю свой выбор на B в вопросе 1 и B-1 в вопросе 2, потому что результат все еще включает предыдущий выбор, который является значением A-1, даже если я создал кнопку очистки, которая очищает значение массива.Правильный ответ на этот вопрос должен быть только B-значением и B-1-значением.

//THIS IS THE CODE TO CLEAR THE RESULT
function clearResult() {
  var result = []
  for (var x = 0; x < inputs.length; x++) {
    if (inputs[x].selectedIndex > 0) {
      inputs[x] = 0;
      document.getElementById("demo").innerHTML = '';
    }
  }
  return console.log(inputs);
}
//THIS IS THE CODE TO DISPLAY THE RESULT
var inputs = form1.elements;
function displayResult() {
  var result = [];
  for (var x = 0; x < inputs.length; x++) {
    if (inputs[x].selectedIndex) {
      result += inputs[x].value + "</br>";
      document.getElementById("demo").innerHTML = result;
    }
  }
  return false;
}
//PLEASE IGNORE THE CODE BELOW
//FOR HIDING DROPDOWN
var base = {
  productFilterSetup: function() {
    $('.productFilter').each(
      function() {
        var tmp = new base.filterGroup(this);
        tmp.setup();
      });
  },
  filterGroup: function(filter_group) {
    var me = this;
    me.target_element = filter_group;
    me.active_element_index = 0;
    me.setup = function() {
      $(filter_group).find('option[type=dropdown]').bind('click', function() {
        me.update(this);
      });
    };
    me.update = function(target_dropdown) {
      var div = $(me.target_element).find('div'),
        len = div.length,
        i = 0,
        j = 0,
        dropdowns,
        dropdowns_len,
        options = [],
        options_buffer = '',
        num_of_steps = 0;

      for (i = 1; i <= num_of_steps + 1; i += 1) {
        if ($('div.step' + i).length > 0) {
          num_of_steps += 1;
        }
      }

      for (i = 0; i < num_of_steps; i += 1) {
        if ($(target_dropdown).parents('div.step' + (i + 1)).length > 0) {
          for (j = i; j < num_of_steps; j += 1) {
            $('div.step' + (j + 2) + ' option[type=dropdown]').attr('checked', false);
          }
        }
      }

      for (i = 0; i < len; i += 1) {
        dropdowns = $(div[i]).find('option[type=dropdown]');
        dropdowns_len = dropdowns.length;
        for (j = 0; j < dropdowns_len; j += 1) {
          if ($(dropdowns[j]).is(':checked')) {
            options.push(j + 1);

          }
        }
      }
      div.addClass('hide');
      $('div.option0').removeClass('hide');
      for (i = 0; i < options.length; i += 1) {
        options_buffer += options[i];
        $('div.option' + options_buffer).removeClass('hide');
      }
    };
  }
};

$(
  function() {
    base.productFilterSetup();
  });
//]]>

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" class="productFilter" name="form1" target='sendinfo' id='infoform' onsubmit='return displayResult()'>
  <!-- Group 1 -->
  <div class="step1 option0">
    <label for="group_1">Qustion-1</label>
    <select>
      <option disabled selected class="drpdow">Select Option</option>
      <option id="1" name="group_1" class="drpdow" type="dropdown" value="-A-Value" />
      <label for="1">A</label>
      <option id="2" name="group_1" class="drpdow" type="dropdown" value="-B-Value" />
      <label for="2">B</label>
    </select>
  </div>
  <!-- Group 2 -->
  <div class="hide step2 option1">
    <label for="group_2">Qustion-2</label>
    <select>
      <option disabled selected class="drpdow">Select Option</option>
      <option id="1_1" name="group_2" class="drpdow" type="dropdown" value="-A-1-Value" />
      <label for="1_1">A-1</label>
      <option id="1_2" name="group_2" class="drpdow" type="dropdown" value="-A-2-Value" />
      <label for="1_2">A-2</label>
    </select>
  </div>
  <div class="hide step2 option2">
    <label for="group_2">Question-2</label>
    <select>
      <option disabled selected class="drpdow">Select Option</option>
      <option id="2_1" name="group_2" class="drpdow" type="dropdown" value="-B-1-Value" />
      <label for="2_1">B-1</label>
      <option id="2_2" name="group_2" class="drpdow" type="dropdown" value="-B-2-Value" />
      <label for="2_2">B-2</label>
    </select>
  </div>
  <!-- End of form -->
  <p class="pResult" id="demo">
    Result will display here
  </p>
  <p id="demo1"></p>
  <input class="copyData" id="btn" type='submit' value='Display result' />
  <button class="copyData" id="btnShow" type="button" onclick="clearResult()">Clear result</button>
</form>