将ul列表发送到django表单

在一个模板中，我有两个连接的列表，其中一个最初是空的。用户必须从左侧列表中选择最多三个选项，将它们添加到右侧列表中，按优先级排序，然后将其发送回

它看起来像：

<ul id="sortable1" class="connectedSortable">
  <li value="1">Item A</li>
  <li value="2">Item B</li>
  <li value="3">Item C</li>
  <li value="4">Item D</li>
  <li value="5">Item E</li>
  <li value="6">Item F</li>
  <li value="7">Item G</li>
</ul>
</div>

<ul id="sortable2" class="connectedSortable">
 <!--here goes the initially empty list-->
</ul>

---

问题是如何将更新的ul（

sortable2

）中的信息发布回数据库？我可以在页面中添加一个隐藏字段

首选项

，然后使用jQuery填充它，但这似乎是一个丑陋的解决方案。正确的方法是什么？

如果您想将更新的ul（sortable2）发布回数据库，那么一个可能的解决方案是ul（sortable2）应该位于一个表单中，您可以使用POST方法提交该表单的数据

现在，当任何li元素从ul（sortable1）移动到ul（sortable2）时，输入类型元素也将插入ul（sortable2）以及列表元素中，其中为“值”输入的属性必须与ul（sortable1）was中的li元素相同。此外，此输入元素的类型将是隐藏的

---

因此，现在，当您使用提交按钮提交此表单时，您将在视图中获取所有数据，从而可以相应地更改数据库。

“然后还插入了输入类型元素”-您的意思是，一旦我将ul（sortable2）插入表单，它将自动插入，或者我应该自己添加输入类型？您必须为点击按钮编写一个onClick函数，该按钮上的元素从ul（sortable1）移动到ul（sortable2）。在该函数中，您必须先创建一个div，然后创建一个input-type元素，然后使用javascript将该元素附加到该div中。有关如何使用javascript将输入字段或一般div和元素添加到html的示例，请参见此->查看填充函数以及如何将输入元素添加到div以及如何设置其属性和属性。

<script>
    $( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
    } );
 </script>

preferences = CommaSeparatedIntegerField()