javascript - 无法在 Django 中实现动态下拉列表

Question

我需要实现两个下拉列表，秒的值取决于第一个的选择。

我能够在后端实现它，但我很难在前端实现它，更具体地说是使用 javascript!

countries = Country.objects.filter(Enabled=True)
citiesByCountry = {}

for country in countries:
    citiesInCountry = City.objects.filter(Enabled=True, Country=country)
    cities = []

    for city in citiesInCountry:
        cities.append(city.Name)

    citiesByCountry[country.Name] = cities

context = {'citiesByCountry': citiesByCountry}
return render(request, 'index.html', context)

所以我有以下结构:

'Country':['City1', 'City2']

这是 HTML:

<div class="form-group col-md-4">
    <select class="form-control" onchange="test(this.value)" id="sel1">
        {% for country in citiesByCountry %}
            <option value="{{ country }}">{{ country }}</option>
        {% endfor %}
    </select>
</div>
<div class="form-group col-md-4">
    <select class="form-control" id="cities">
    </select>
</div>

所以我添加了以下 JavaScript:

<script>
    var country_objs = {};
    {% for country, cities in citiesByCountry.items %}
        country_objs['{{country|escapejs}}'] = '{{cities|escapejs}}';
    {% endfor %}
</script>

<script type="application/javascript">
    function test(country) {
        var $cities_select = $("#cities");
        $(country_objs[country]).each(function(){
            $cities_select.append('<option>' + this + '<\option>');
        });
    }
</script>

第二个下拉列表永远不会被填充，但是当我像这样打印country_objs的内容时:console.log(country_objs[country]);

我得到以下信息:

['City1', 'City2', 'City3']

这是正确的，但 .each 函数不会循环遍历项目。我认为问题在于上面不是一个正确的数组而是一个字符串，但仍然无法理解为什么。

请注意，我收到以下错误:

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: ['City1', 'City2', 'City3']

不幸的是，无论我尝试什么都行不通，我无法想象在 Django 中实现这个会如此困难。

我想避免使用第三方应用程序或模块来完成这个简单的事情，并且我想使用正确的方法来完成它(即最好的方法)，因此任何想法都将非常有值(value)。

Answer 1

有两种解决方案:

解决方案 1:

使用for循环:

country_objs['{{country|escapejs}}'] = [{% for city in cities %}"city",{% endfor %}];

解决方案 2:

切换线路:

citiesByCountry[country.Name] = cities

对于:

citiesByCountry[country.Name] = json.dumps(cities)

编码为json，然后在模板中:

country_objs['{{country|escapejs}}'] = {{cities|safe}};

关于解决方案 2 的观察:

变量周围不能有单引号

'{{cities|safe}}';

在第二个解决方案中，或者当您添加列表['City1', 'City2', 'City3']时，您将拥有:

'['City1', 'City2', 'City3']'