使用HTMLEvent通过JS调用angular

Question

我选择了一堆选项并在下面输入，就像：

<select id="fr.fruitId" name="fr.fruitId" 
  class="form-control custom-select ng-pristine ng-untouched ng-valid ng-empty" 
  tabindex="11" 
  ng-model="fr_fruit" 
  ng-options="p.name for p in fr_fruits track by p.id">
  <option value="" class="" selected="selected">-- choose --</option>
  <option label="banana" value="1">banana</option>
  <option label="apple" value="2">apple</option>
  <option label="orange" value="3">orange</option>
</select>
<input type="hidden" id="fr.fruit" name="fr.fruit" value="" autocomplete="off">

我有第二个选择选项，它从上面的选择中加载基于fruit的元素。当我用鼠标更改选定的fruit时，一切正常，但在一种情况下，我想在点击按钮（通过jQuery）后使用下面的代码将其更改为随机值（另外我删除了从中选择的属性）每个选项）。

if (arr1[i].label.toLowerCase() == type) {
    arr1[i].setAttribute("selected", "selected");
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    document.getElementById(input).dispatchEvent(evt);
    break;
}

起初看起来一切正常，但有一个问题。如果选择apple且下一个随机元素为orange，则会更改为orange。但是当orange下一个值再次apple之后，它就不起作用了。一旦选择了某些内容，就无法再次选中（在这种情况下，orange会停留，第二个select也不会被重新加载，因此只有更改选择的随机值为apple。