如何正确使用JavaScript下拉框过滤？

Question

长期潜伏在网站上，第一次张贴海报。我发现一些线程可以解决我的问题，但只是部分解决了。问题就在这里。在

我有一个非常简单的网站，包括一些文本和两个下拉框。我在服务器端使用python3.4，在服务器端使用Flask，在客户端使用一些简单的HTML和一些嵌入式JavaScript。第一个下拉列表的目的是过滤第二个。在

第一个列表编码为：

<select id = "myState" name = "myState">
  <option selected = "selected">Select state...</option>
  <option value = "GA">Georgia</option>
  <option value = "NC">North Carolina</option>
  <option value = "TN">Tennessee</option>
  <option value = "VA">Virginia</option>
  <option value = "MD">Maryland</option>
  <option value = "PA">Pennsylvania</option>
  <option value = "NJ">New Jersey</option>
  <option value = "NY">New York</option>
  <option value = "CT">Connecticut</option>
  <option value = "MA">Massachusetts</option>
  <option value = "VT">Vermont</option>
  <option value = "NH">New Hampshire</option>
  <option value = "ME">Maine</option>
</select>

同时，第二个列表有285个条目，并通过如下Flask list变量进行编码：

^{pr2}$

{{ o[4] }}是包含状态缩写的内容，因此，当从第一个列表中进行选择以将第二个列表筛选为所选内容时，以下JavaScript使用选项列表的类来进行筛选：

<script>
  $(document).ready(function() {
    var allLocations = $('#myShelter option')
    $(myState).change(function() {
      var currState = document.getElementById("myState").value;
      var currStateLocations = allLocations.filter('.' + currState);
      $('#myShelter option').remove();
      $.each(currStateLocations, function (i, j) {
        $(j).appendTo('#myShelter');
      });
    });
  });
</script>

JavaScript只是将第二个列表中的所有285个条目拉到一个变量中，清除列表，然后使用从第一个列表中选择的内容来过滤285个条目，并只将过滤后的条目放回原处。在

第一次这样做很好；但是，对于第一个列表中的任何后续选择，它不起作用，因为$('#myShelter option')现在只包含过滤后的列表。如果你第一次选择了“北卡罗来纳州”，然后想要“弗吉尼亚州”，它就不起作用了，因为列表现在只包含“北卡罗来纳州”的条目。在

最好的办法是什么？我想用其他方式把完整的列表拉到JavaScript中，这样它就不依赖于下拉列表中已经存在的内容了，但是我不知道怎么做。也许是烧瓶变量？非常感谢。在

Answer 1

将285个条目加载到一个全局JS变量中，然后在构建第二个下拉框时，根据该全局变量对其进行过滤，使其保持原样。在