Question

我正在使用Django Crispy Forms，在我的创作表单中，我希望我的用户在选择下拉列表中选择一个类别，然后我想获取与该类别相关的所有功能并显示所有功能在下面的复选框中。我认为ajax / Jquery对此有意义，所以我想出了以下内容：

我的观点：

def show_category_feature_set(request):

    category_id = request.GET.get('category')
    category = Category.objects.get(id=category_id)
    features = category.features.all().values('name', 'id')
    response_data = {}
    try:
        response_data['features'] = list(features)
    except:
        response_data['error'] = "Sorry, couldn\'t load any features"
    return JsonResponse(response_data)

我的模特：

class Feature(models.Model):
    name = models.CharField(max_length=100, blank=False)

class Category(models.Model):
    name = models.CharField(max_length=50, blank=False)
    slug = models.SlugField(unique=True)
    features = models.ManyToManyField(Feature, through='FeatureCategorization' )

class FeatureCategorization(models.Model):
    category = models.ForeignKey(Category)
    feature = models.ForeignKey(Feature)

这是我的表格：

class ListingForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(ListingForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_id = 'listing'
        self.helper.form_show_errors = True
        self.helper.form_method = 'post'
        self.helper.form_action = 'submit'
        self.helper.add_input(Submit('submit', 'Submit'))

    class Meta:
        model = Listing
        fields = ['title', 'event_types', 'category', 'features', 'description', 'blog_url', 'website', 'pricing_page']

        widgets = {
            'event_types': forms.CheckboxSelectMultiple(),
            'features': forms.CheckboxSelectMultiple()
        }

这是我的Django Crispy Form（Model Form）生成的html。我需要动态创建此块，因此需要根据之前的选择显示下面的复选框。

<div class="form-group" id="div_id_features">
    <label class="control-label requiredField" for="id_features_0">Features<span class="asteriskField">*</span></label>
    <div class="controls" id="listing">
        <div class="checkbox">
            <label class=""><input id="id_features_1" name="features" type="checkbox" value="10">Online Registration</label>
        </div>
        <div class="checkbox">
            <label class=""><input id="id_features_2" name="features" type="checkbox" value="11">PCI Compliance</label>
        </div>
    </div>
</div>

这是正确执行所有操作的AJAX，但不会生成正确的HTML。

$( "#id_category" ).change(function () {
  var category = $( this ).val();

  $.ajax({
    url: '/ajax/category_features/',
    data: {
      'category': category
    },
    dataType: 'json',
    success: function ( response_data ) {
      $("#div_id_features").empty().append(response_data.features.map((feature) => {
        return  $('<input >', {
            type : 'checkbox',
            id: 'id_features_' + feature.id,
            name: 'features',
            value: feature.id,
        }).wrap("<label > </label>").text(feature.name);
      }));
    }
  });
});

以上生成以下内容（它基本上显示了两个空的复选框，未格式化，未标记）。

<div id="div_id_features" class="form-group">
    <input type="checkbox" id="id_features_10" name="features" value="10">
    <input type="checkbox" id="id_features_11" name="features" value="11">
</div>

我真的不知道我是否正确处理问题。根据以前的选择下拉列表动态创建复选框的最简单方法是什么？我的Jquery有什么问题？你可以说，我是一个初学者。你们会怎么做？我的方法有什么问题？任何帮助将不胜感激。

Answer 1

这是.wrap如何工作，看起来元素必须在DOM中工作，但无论如何，根本不需要包装它，你可以在地图中创建任何你想要的东西。

此处的示例 - https://jsfiddle.net/oborudko/eo5x0unr/

  $('#features').empty().append(features[$(this).val()].map(feature => $('<div class="checkbox"><label>' + 
    '<input type="checkbox" name="features[]" value="' + feature.id + '"/>' + feature.name +
    '</label>')
  ));
});

Django：根据使用Jquery / Ajax的select下拉列表动态创建复选框？

1 个答案: