Вызовите ajax в выпадающем меню

Question

Я создал форму и заполнил ее значение из модели Category в раскрывающемся списке. Работает. Я отобразил эту форму в шаблоне, как это {{ language_form }}. Это сработало. Теперь я хочу реализовать событие onchange в этом раскрывающемся списке с помощью ajax. Функция будет вызываться при изменении выпадающего значения.

Редактировать: это можно сделать без форм django. <select onchange='ajaxfunction()'></select> Но я использую формы Django.

Форма

from django import forms
from myapp.movie.models import Category
class Language(forms.Form):
     language = forms.ModelChoiceField(queryset=Category.objects.all())

Вот моя функция Ajax

   function showMovie(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "movie_list?q=" + str, true);
        xmlhttp.send();
    }

Answer 1

Если вы хотите просто добавить onchange attr, тогда:

class Language(forms.Form):
    language = forms.ModelChoiceField(queryset=Category.objects.all(), widget=forms.Select(attrs={'onchange':'ajaxfunction()'}))

Или вы можете визуализировать форму вручную.

Answer 2

Добавьте этот код в конец вашей формы.

...
</form>

    <script type="text/javascript">
        var ddl = document.getElementById('ddlYourDropDownListID');
        ddl.onchange = function() {
            var str = 'someValue';
            showMovie(str);
        };
    </script>

</body>
</html>