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

在视图.py在

^{pr2}$

在机会.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);命令记录了什么？我怀疑您没有正确地迭代结果来填充第二个select。在

我不确定，但我认为$("#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);
}