javascript - 清除链接的相关下拉组合框选择中选定(子)类别的所有子类别

Question

我正在尝试实现链式依赖下拉组合框选择，因此您从一个主类别的组合框开始，一旦您选择了主类别，另一个 <select>出现用于选择子类别，依此类推，直到选择了最里面(最具体)的子类别。

假设我有两个主要类别，书籍和鞋子，所以如果我选择书籍 -> 教科书 -> 小学，那么我决定选择鞋子，四个 <selects> s 会出现。相反，我想清除所选(子)类别的所有子类别(在这种情况下，两个 <select> s(教科书和小学))并让用户仅从主要类别中进行选择。或者，如果我选择 Books -> Literature，它应该删除 Primary school/High school <select>并显示“文学”的子类别。

这是我在 Django 模板中的 jQuery 代码:

{% extends 'pages/base.html' %}

{% block content %}
<h1>Create a product</h1>
<form method='POST' id='productForm' data-products-url="{% url 'products:ajax_load_categories' %}">
    {{ form.as_p }}
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    var $r_ = function() {
        var url = $("#productForm").attr("data-products-url");
        var categoryId = $(this).val();
        $.ajax({                       
          url: url,                    
          data: {
            'category': categoryId
          },
          success: function (data) {
            if (data != 'leaf_node') {
              $("#productForm").append(data);
            }
            $('select').change($r_);
          }
        });

    } //end of $r_
    $('select').change($r_);
</script>
{% endblock %}

...这是我的观点:

def load_categories(request):
    category_id = request.GET.get('category')
    subcategories = Category.objects.get(id=category_id).get_children()
    if subcategories:
        return render(request, 'products/category_dropdown_list_options.html', {'subcategories': subcategories})
    return HttpResponse('leaf_node')

products/category_dropdown_list_options.html

<select>
    <option value="">---------</option>
    {% for subcategory in subcategories %}
        <option value="{{ subcategory.pk }}">{{ subcategory.name }}</option>
    {% endfor %}
</select>

这目前是这样工作的，每当组合框中的值发生更改时，都会触发 AJAX 请求，该请求调用呈现另一个 View 的 View <select>如果类别有子项，则返回一个停止附加监听器的 HttpResponse。

我正在使用 django-mptt为我的类别建模:

from mptt.models import MPTTModel, TreeForeignKey


class Category(MPTTModel):
    parent = TreeForeignKey('self', on_delete=models.CASCADE, null=True, blank=True, related_name='children')
    name = models.CharField(max_length=255)
    slug = models.SlugField()

    class Meta:
        unique_together = (('parent', 'slug',))
        verbose_name_plural = 'categories'

    class MPTTMeta:
        order_insertion_by = ['name']

    def __str__(self):
        return self.name

    def save(self, *args, **kwargs):
        self.slug = slugify(self.name)
        super().save(*args, **kwargs)    

我该如何克服这个问题？

Answer 1

我用了$(this)访问当前 <select>我用它来选择下一个 <select> s 并删除它们，然后再添加新的。它们都必须是兄弟元素才能使其工作:

$(this).nextAll('select').remove()

因此，为了从 AJAX 成功内部访问它，我必须将它存储在一个变量中并在回调中使用该变量。

我也改了$('select').change($r_)改为使用事件委托(delegate)，因为我一直这样做的方式会为每次更改多次调用我的函数。所以，我将其更改为:

$(document).on('change', 'select', $r_);

并删除了成功回调中的 .change() 调用。

这是工作代码:

{% extends 'pages/base.html' %}

{% block content %}
<h1>Create a product</h1>
<form method='POST' id='productForm' data-products-url="{% url 'products:ajax_load_categories' %}">
    {% csrf_token %}
    <label>Title</label>
    {{ form.title }}
    <label>Description</label>
    {{ form.description }}
    <label>Price</label>
    {{ form.price }}
    <label>Year</label>
    {{ form.year }}
    <label>Category</label>
    {{ form.category }}
    <input type="submit" name="" value="Submit">
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    var $r_ = function() {
        var url = $("#productForm").attr("data-products-url");
        var categoryId = $(this).val();
        var toRemove = $(this).nextAll('select');
        $.ajax({                       
          url: url,                    
          data: {
            'category': categoryId
          },
          success: function (data) {
            if (data != 'leaf_node') {
              toRemove.remove();
              console.log(toRemove);
              $("#productForm").append(data);
            }
            else {
              toRemove.remove();
            }
          }
        });

    } //end of $r_
    $(document).on('change', 'select', $r_);
</script>
{% endblock %}