Question

网站上的长期潜伏者，首次发布的海报。我发现线程可以解决我的问题，但只是部分解决。这就是问题所在。

我有一个非常简单的网站，其中包含一些文字和两个下拉框。我在服务器端使用带有Flask的Python 3.4，在客户端使用一些简单的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列表变量进行编码，如下所示：

<select id = "myShelter" name = "myShelter" onchange = "window.location.href = '/forecast/loc_id=' + document.getElementById('myShelter').value;">
  <option selected = "selected" disabled = "disabled" class = "labelText">Select location...</option>
  {% for o in shelter_list %}
  <option value = "{{ o[0] }}" class = "{{ o[4] }}" {{ o[3] }}>{{ o[1] }}</option>
  {% endfor %}
</select>

{{ 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')现在只包含已过滤的列表。如果您选择＆＃34; North Carolina＆＃34;第一次，然后想要＆＃34;弗吉尼亚＆＃34;，它不起作用，因为该列表现在只包含＆＃34;北卡罗来纳州＆＃34;条目。

最好的方法是什么？我想将完整的列表以其他方式提取到JavaScript中，这样它就不依赖于下拉列表中的内容，但我不知道该怎么做。也许是Flask {{ }}变量？非常感谢。

Answer 1

将285个条目加载到全局JS变量中，当您构建第二个下拉框时，可以根据该全局变量对其进行过滤，使其保持不变。

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

1 个答案: