根据下拉选择创建动态下拉选项 - 卡住

Posted

技术标签:

【中文标题】根据下拉选择创建动态下拉选项 - 卡住【英文标题】:Creating dynamic dropdown options based off dropdown selection - stuck 【发布时间】:2012-04-30 04:09:20 【问题描述】:

所以我正在尝试创建一个动态表单,其中第二个下拉框根据第一个下拉列表填充。

我正在使用 ajaxjquery 在我的 django 项目中帮助构建这个动态表单,我需要一些帮助。我已经让 ajax 调用正常工作,并且我已将我的选择发送回表单,但现在我无法用我的选择填充表单。

有人可以帮我把 json 输出变成 html 选项吗?

这是我的 ajax.py:

def switch_plan(request, *args, **kwargs):
    from plans.models import Plan, OwnershipType, MemberType, PlanMember
    from datetime import datetime
    now = datetime.now()
    json = 
    data = request.POST
    plan_type = data.get('plan-plan_type')
    print plan_type

    if request.is_ajax():
        if plan_type == '5':
            ownership = OwnershipType.objects.all().exclude(id=3).exclude(id=8).exclude(id=9)
            json['owner_types'] = ownership

    return HttpResponse(simplejson.dumps(json), mimetype='application/json')

我的plans.html js代码:

<script type="text/javascript">
$(function()
    $("#id_plan-plan_type").change(function() 
        q = $("form").serialize();

        $.ajax(
            type: "POST",
            url: "% url plans-switch_plan %",
            dataType: "json",
            data: q,
            success: function(json) 
                //need help here
            
        );
    );
);

$("#id_plan-ownership_type") 是我需要添加选项的选择字段。

编辑我的json输出如下'owner_types': [<OwnershipType: Corporate/Non-Corporate>, <OwnershipType: Estate>, <OwnershipType: In Trust For>, <OwnershipType: Joint Subscriber>, <OwnershipType: Single Subscriber>, <OwnershipType: Tenants in Common>]

【问题讨论】:

顺便说一句:对于视图中的OwnershipTypeplan_type 对象,最好不要使用硬编码的ids。除了完全难以阅读之外,它还取决于数据库的格式是否正确。如果你只是在某种 slug 类型的字段上有一个索引,那么使用它不会对速度造成任何明显的损失,而且它会使维护这段代码变得更加容易。 @Dougal 谢谢,我会改的 你试过django-smart-selects吗? 【参考方案1】:

在您的成功回调中:

$.each(json.owner_types, function(i, value)
    var opt = $("<option></option>");
    opt.text(value.name);
    opt.val(value.id);
    $("#id_plan-ownership_type").append(opt);
)

您还需要将模型数据提取为 JSON 可序列化类型,例如字典,类似于以下内容:

json["owner_types"] = ["name": o.name, "id": o.id
        for o in OwnershipType.objects.all()] # or .filter(...)

【讨论】:

它似乎没有做任何事情......几乎就像它没有成功一样? 我很确定这不是你的 JSON 输出,它看起来像一个 python repr()。你能看到 AJAX 响应体正在使用什么萤火虫吗?通常你不能只用dumps()序列化django模型,你需要将相关数据提取到simplejson可以处理的东西(例如字典)中。 TypeError [&lt;OwnershipType: Corporate/Non-Corporate&gt;, &lt;OwnershipType: Estate&gt;, &lt;OwnershipType: In Trust For&gt;, &lt;OwnershipType: Joint Subscriber&gt;, &lt;OwnershipType: Single Subscriber&gt;, &lt;OwnershipType: Tenants in Common&gt;] is not JSON serializable 是它所显示的 查看更新的答案,django 模型不能直接 JSON 序列化。

以上是关于根据下拉选择创建动态下拉选项 - 卡住的主要内容,如果未能解决你的问题,请参考以下文章

当每个下拉列表动态创建ID时,jquery选择选项数据和值[关闭]

根据下拉选择动态填充字段(Javascript / HTML)

基于下拉列表中选项的选择动态更新表格的Angularjs代码

当用户从下拉菜单中选择选项时,如何从数据库中打印记录?动态程序

根据之前的下拉选择动态填充多达 3 个下拉列表

基于第一个下拉菜单的引导多选动态选项