【问题标题】:Call ajax on dropdown button在下拉按钮上调用 ajax
【发布时间】:2011-11-08 08:55:31
【问题描述】:

我创建了一个表单并从下拉框中的Category 模型填充其值。它的工作。 我在模板中显示了这个表单,像这样{{ language_form }}。它起作用了。现在我想用 ajax 在这个下拉列表中实现 onchange 事件。函数将调用下拉值的变化。

编辑:无需 django forms 也可以这样做。 <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();
    }

【问题讨论】:

    标签: python ajax django


    【解决方案1】:

    如果你只想添加onchange attr,那么:

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

    或者你可以手动渲染表单。

    【讨论】:

    • 谢谢。一个这个。 widget=forms.Select(attrs={'onchange':'ajaxfunction(this.value)'}) 是否正确?想要传递选定的值。
    • @user559744 是的,它只是一个字符串。
    • 哦,好的。但我想发送选定的下拉框值。
    【解决方案2】:

    在表单末尾添加此代码。

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

    【讨论】:

      猜你喜欢
      • 2014-02-02
      • 1970-01-01
      • 2017-09-13
      • 2016-12-31
      • 2020-12-12
      • 1970-01-01
      • 1970-01-01
      • 2014-01-25
      • 2012-04-22
      相关资源
      最近更新 更多