Django - 使用下拉列表将字段转换为标记

Question

在我的django表单中，我有一个名为package_includes的字段和一个名为price的字段。现在，package_includes中的内容只是文本。所以，如果我输入＆＃34;纸张，胶水，闪光＆＃34;它会像我输入的那样显示，无法改变任何东西。但是，我希望文本像单个标记一样工作 - ＆gt; How I want tags to look

所以当你点击其中一个单独的项目时（EX：＆＃34;纸张＃34;，＆＃34;胶水＆＃34;或者＆＃34;闪烁＆＃34;）我希望它显示一个下拉，允许您选择额外的闪光额外$ 2.00总额。

此外，在文本的最后，我想要一个显示＆＃34; Add＆＃34;此功能允许您添加此特定包中未包含的项目。例如，您应该能够以5美元的价格添加蜡笔，以2.50美元的价格添加荧光笔等。

我是编程新手，并且不完全了解如何在django的字段中为这样的文本添加函数。提前感谢您的帮助！

Answer 1

遗憾的是，你的问题的答案不是逐步说明如何从0转到完整的工作示例 - 只是指向正确方向的指针。

你需要的是通过CSS（产生你想要的视觉效果）和JavaScript（处理下拉功能;它很可能必须是你自己的基于jQuery的脚本）来实现的。您想要的所有内容都需要在Internet浏览器中生存（执行），而Django只能通过提供静态CSS和脚本文件来帮助它们，并在将它们放入正确的模板时在实际页面中引用它们。

以下是Wagtail Admin做类似事情的例子：

如果您在浏览器中打开了页面源代码，那么您将看到以下HTML代码：

<div class="field-content">
    <div class="input  ">
            <input id="id_tags" name="tags" type="text" value="&quot;hello world&quot;, blog" /><script>initTagField("id_tags", "/admin/tag-autocomplete/");</script>
        <span></span>
    </div>
</div>

但是如果您使用FireBug，浏览器的开发工具或Web Developer扩展程序打开页面，并应用了视觉样式，它将分解为：

如果您注意到，表单输入元素的应用样式为display: none;。你看到的实际上是风格无序的列表元素。为了能够在脚本中使用它们，您需要能够从JS函数中获取它们/它们的内容。一种策略是为所有可见的<li>元素分配id属性。它可以是基于反制的（例如id="shopping-cart-item-0"，id="shopping-cart-item-1"等）。另一种方法是为<div class="input">元素分配一个id，并在你的函数中获取所有类型为<li>的DOM后代。无论哪种方式对你有用。然后你可以解析脚本中list元素的标签（内部文本），以获得你正在处理的项目类型，然后找到折扣价并应用它......

我建议您从一个有用的示例开始 - 找到一些使用taggit或Django类似软件包的应用程序并将其安装在测试应用程序中。然后，您可以使用浏览器或首选的Web开发扩展来使用它们上的CSS，并查看不同选项如何影响您所需的视觉方面。一旦您对此感到满意，请参阅如何使用jQuery构建下拉菜单。我相信jQuery网站有足够的关于该主题的教程。