Django: Как создать зависимый выпадающий список

Question

Я хочу создать зависимые выпадающие меню, но я не уверен, как лучше всего реализовать решение.Основываясь на значении, выбранном в первом раскрывающемся меню, я хочу заполнить последующие раскрывающиеся меню, используя это значение в своем запросе.Несмотря на работу, которую я уже выполнил, я не возвращаю никаких данных после выбора значения в первом раскрывающемся меню.Пожалуйста, дайте мне знать, если есть какая-либо другая информация, которую я могу предоставить, чтобы лучше проиллюстрировать мою проблему.

Models.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')

Возможности.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 вместо добавления и требует значения и параметра,См. Изменение массива опций в списке выбора , но он может быть устаревшим.

Эта ссылка также может быть полезна: 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);
}