我如何在Bootstrap-select插件中使用Django嵌入式表单集？

Question

我一直在尝试从此处https://developer.snapappointments.com/bootstrap-select/将Django内联表单集与bootstrap-select插件一起使用，并且其他所有东西都运行良好，我能够在表单中的另外两个选择上成功调用该插件而且我正在使用内联表单集在书中添加新作者。当我放入“ selectpicker”类时，页面加载后它只能工作一次，但是当我按下按钮添加更多作者时，不会加载选择字段。

所以我有一个问题...我可以同时使用这两个吗？如果是，怎么办？如果不是，是否有任何解决方法可以在选择字段中进行搜索？

Bellow是我按下表单末尾的绿色大“添加”按钮时表单外观的图像。

您可以看到只有两个字段，一个少于第一个字段。

如果需要任何代码，请告诉我，我会立即添加。

谢谢！

编辑：

这是我的代码，由Chris问：

我的模板：

{% extends 'base.html' %}
{% load widget_tweaks %}
{% block content %}
  {% load static %}
  <form method="POST" class="form" action="">
    {% csrf_token %}

    [other fields]
    ...

    <!-- HERE I HAVE MY TWO OTHER SELECT FIELDS WHICH WORK PERFECTLY -->

    <div class="container">
      <div class="col-sm-12">
        <div class="form-group">
          <div class="row">
            <div class="col-sm-6">
              <label>Editora do Livro:</label>
              {{ form.editora_cod_editora|add_class:"selectpicker form-control"|attr:"data-live-search='true'" }}
            </div>
            <div class="col-sm-6">
              <label>Categoria do Livro:</label>
              {{form.categoria_cod_categoria|add_class:"selectpicker form-control"|attr:"data-live-search='true'" }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- HERE START MY ONLINE FORM, AS SHOWS THE PRINT -->

    <div class="container">
      <div class="col-sm-12">
        <hr>
        <h4>Adicionar Autor</h4>
        <hr>
        <div class="form-group bg-light rounded ">
        {{ autor_livro.management_form }}
          {% for form in autor_livro.forms %}
            <div class="{% cycle 'row1' 'row2' %} formset_row m-5 inline-form">
              {{ form.autor_cod_autor|add_class:"selectpicker form-control"|attr:"data-live-search='true'" }}
              {{ form.ordinal_autorlivro|add_class:"form-control" }}
              {{ form.autor_funcao|add_class:"form-control" }}
            </div>
          {% endfor %}
          </div>
      </div>
      <div class="container">
        <div class="col-sm-12">
          <div class="form-group">
            <div class="row">
              <div class="col-sm-8"></div>
              <div class="col-sm-4">
                <button type="submit" class="btn-outline-primary btn float-right">Salvar</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    {% block scripts %}
      <!-- HERE I HAVE MY SCRIPT THAT MAKES THE INLINE FORM WORK WITH THAT PLUGIN -->
      <script src="{% static 'js/jquery.formset.js' %}"></script>
      <script type="text/javascript">
        $('.formset_row').formset({
          addText: 'Adicionar Autor',
          deleteText: 'Remover',
          prefix: 'autorlivro_set'
        });
      </script>
    {% endblock %}
  {% endblock %}

Answer 1

答案是bootstrap-select插件的行为。您正在使用“ selectpicker”类激活它。加载页面后，一些javascript魔术师将元素与类selectpicker结合在一起并创建您看到的小部件。您现在看到的“选择”不是原始的<select>，而是辅助控件，您的<select>仍然存在，但从视图中隐藏了。

现在，当您添加另一种形式时，不会再次调用javascript magic，因此您会得到一个新的形式，其中<select>隐藏在用户的视线之外。

为了使它再次呈现得很好，您需要在添加新表单后运行所需的javascript。 django-dynamic-formset提供了一个称为added的选项，允许您定义一个在添加新表格后调用的函数。表单更多详细信息，请参见表单集选项here。

因此，定义函数并在添加表单后调用它。在您的情况下，脚本可能如下所示：

<script type="text/javascript">
    var activate_select = function(row){
        row.find('.selectpicker').selectpicker();
    };

    $('.formset_row').formset({
        addText: 'Adicionar Autor',
        deleteText: 'Remover',
        prefix: 'autorlivro_set,
        added: activate_select
    });
</script>