重新捕获下拉菜单值，而无需刷新页面

Question

我正在开发一个决策树下拉菜单，其中选择可能会根据用户的决策进行更改。 如果没有对选择进行任何更改，则可以在 selectedIndex 的帮助下使用循环显示正确的结果，但是当我将其更改为其他选择时，我就遇到了问题

我已经尝试通过执行此 result = [] 以及此 result = 0 来清除存储的数组，但是此后，即使我创建了一个用于显示结果和清除结果的单独按钮。

示例场景：

当我单击“显示结果”时，我在问题1上选择A，然后在问题2上选择A-1，它将显示正确的选择。当我将问题1的选择更改为B并将问题2的选择更改为B-1时，就会发生问题，因为即使我创建了清除数组值的清除按钮，结果仍包括先前的选择，即A-1值。正确答案应该仅是B值和B-1-Value。

//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>