我有一个使用嵌套jQuery .on()事件处理程序的设置，这会导致不必要的重复函数调用。
我想做以下几件事：

• 获取用户输入，该输入将被传递给外部API，返回结果列表。
• 用这些结果填充一个菜单，并自动选择第一个，并使用它来做一些事情。
• 观察浏览器的变化，如果用户从列表中选择了一个新的选项，就用它来代替。

下面的代码片段实现了我想要的功能，但是，正如您所看到的，console.log()被多次调用（其中次数等于myInput文本的input处理程序被触发的次数）。[要查看此内容，请在输入框中键入一定数量的字符，然后从选项卡中选择一个选项。控制台将记录您选择的选项，次数等于您输入的字符数]
我如何才能避免这种不断增长的相同呼叫？

function setOptions(prefix) {
  // in actual setting, pages = externalAPI(prefix)
  pages = [prefix + "(a)", prefix + "(b)", prefix + "(c)"]
  $('#mySelector').html(
    pages.map(function(page, i) {
      return $("<option />").val(i).text(i + ': ' + page)
    }))
  return pages;
};

function setSelected(val) {$('#mySelected').html(val)};

$(function() {
  $('#myInput').on('input', function() {
    let options = setOptions($(this).val())
    setSelected(options[0]);
    $('#mySelector').on('change', function(e) {
      console.log(this.value);
      setSelected(options[this.value]);
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Input a prefix, then select an option.</p>
<input type="text" id="myInput"></input>
<select id="mySelector"></select>
<p>selected: <span id="mySelected">&nbsp;</span></p>