Django：如何创建依赖下拉列表

Question

我想创建相关的下拉菜单，但我不确定如何最好地实施该解决方案。根据在第一个下拉菜单中选择的值，我想在查询中使用该值填充后续下拉菜单。尽管我已经完成了工作，但在第一个下拉菜单中选择了一个值后，我没有返回任何数据。如果我可以提供任何其他信息来更好地说明我的问题，请告诉我。

模型.py

class Location(models.Model):
    city = models.CharField(max_length=50)
    company = models.ForeignKey("company", on_delete=models.PROTECT)

    def __unicode__(self):
        return u'%s' % self.name


class Company(models.Model):
    name = models.CharField(max_length=50)

    def __unicode__(self):
        return u'%s' % self.name

Views.py

def opportunities(request):
    companies = cwObj.get_companies()
    context = {'companies': companies}
    return render(request, 'website/opportunities.html', context)


def new_opportunity(request):
    source = request.GET.get('selected_company')
    result_set = []
    all_locations = []
    string = str(source[1:-1])
    selected_company = cwObj.get_locations(string)
    all_locations = selected_company
    for location in all_locations:
        result_set.append({'location': location})
    return HttpResponse(json.dumps(result_set), mimetype='application/json', content_type='application/json')

Opportunities.html

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"></script>
        <script>
            $(document).ready(function(){
                 $('select#selectcompanies').change(function () {
                     var optionSelected = $(this).find("option:selected");
                     var valueSelected  = optionSelected.val();
                     var source   = optionSelected.text();


                     data = {'selected_company' : source };
                     ajax('/new_opportunity',data,function(result){

                            console.log(result);
                            $("#selectlocations option").remove();
                            for (var i = result.length - 1; i >= 0; i--) {
                                $("#selectlocations").append('<option>'+ result[i].name +'</option>');
                            };


                         });
                 });
            });
        </script>

<div class="field">
            <label class="label">Client Information:</label>
            <div class="select">
                <select name="selectcompanies" id="selectcompanies">
                    <option value="">Company</option>
                    {% for company in companies %}
                    <option value="" name="selected_company">{{ company.name }}</option>}
                    {% endfor %}
                </select>
            </div>
            <div class="select">
                <select name="selectlocations" id="selectlocations">
                    <option>Location</option>
                    {% for location in locations %}
                    <option value="">{{ location }}</option>
                    {% endfor %}
                </select>
            </div>

Answer 1

如果您查看浏览器的控制台（如果您不知道那是什么，请按 F12），console.log(result); 命令会记录什么？我怀疑您没有正确迭代该结果以填充您的第二个选择。

我不确定，但我认为 $("#selectlocations").append('<option>'+ result[i].name +'</option>'); 行应该使用 add 而不是 append 并且需要一个值和选项。请参阅Change the options array of a select list，但它可能已过时。

此链接也可能会有所帮助： https://www.electrictoolbox.com/javascript-add-options-html-select/ 建议以下内容，尽管我觉得可能有比必须确定每个循环的长度更好的方法。

var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C'
};

var select = document.getElementById("example-select");
for(index in myobject) {
    select.options[select.options.length] = new Option(myobject[index], index);
}