Django表单中的“Plus”按钮：用户是否可以添加字段？

Question

我试着在Google上寻找答案，但我真的很难找到任何与我的问题有任何关联的东西。 我玩弄过表单集、模型选择字段等等，但没有结果。在

这里是这样的：我有一个表单，用户可以从中创建npc（非玩家角色），有名字、类、级别和技能。 可能技能的数量是不固定的，所以NPC可以有3个技能，也可以有10个技能，这取决于用户的需要。 是否可以让用户动态地向表单添加“技能”字段（下拉栏），例如使用“添加技能”按钮？在

对于Django/Python（包括附加的Django模块），有没有一种方法可以做到这一点呢？或者，使用Javascript会更容易些吗？在

非常感谢阅读本文的任何人，以及任何有帮助的答案，可以为我指明正确的方向！在

Answer 1

https://github.com/elo80ka/django-dynamic-formset

试试这个。

在html文件中

<form method="post" action="{{url}}">
    {% csrf_token %}        
    <table>
        <thead>
            <tr>
                <th>Skill</th>
                <th class="one"></th>
            </tr>   
        </thead>
        <tbody>
            {% for form in skill_formset.forms %}
                <tr class="check_items_row form_set_row">           
                    <td>
                        {{form.id}}
                        <span class="name">                             
                            {{ form.name }}
                        </span>
                    </td>
                    <td class="one">{% if form.instance.pk %}{{ form.DELETE }}{% endif %}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {{ skill_formset.management_form }}
     <div class="m-t-20">
        <button type="submit" class="btn btn-info waves-effect">Submit</button>
    </div> 
 </form>

<script type="text/javascript" src="{% static 'js/jquery.formset.js' %}"></script>
$(document).ready(function(){
   $('.skill_formset table tr.form_set_row').formset({
    prefix: '{{ skill_formset.prefix }}',
    formCssClass: 'dynamic-formset1',
    });
});

显示的图像来自我的作品，它是由jqueryformset创建的。我希望同样的事情是你想要的。

Answer 2

你为什么不在技能上使用复选框，这样用户就可以检查他们想要的所有技能呢？

但是，如果设置了add-a-field选项，则可能需要使用Javascript添加新的表单字段。但是，在提交表单之后处理它不会有太大的变化，并且仍然会在您相同的Django视图中进行。

下面是一个简单的代码示例，它可以满足您的需要：

function confirm(event) { // event.preventDefault(); document.getElementById("confirmation").style.display = "block"; return false; }; function addSkill() { var newSkillField = document.createElement("LI"); selectNode = ` <select form="npc_form" name="npc_skills"> <option value="skill_one">Skill 1</option> <option value="skill_two">Skill 2</option> <option value="skill_three">Skill 3</option> <option value="skill_four">Skill 4</option> </select> `; newSkillField.innerHTML = selectNode; var skill_list = document.getElementById("skill-list"); skill_list.insertBefore(newSkillField, document.getElementById("add-skill-li")); } ； ^{pr2}$ ；