javascript - 使用 Flask 填充 Selectize.js 下拉列表

Question

我正在使用 flask 构建一个网络应用程序，并试图填充 Selectize.js带有国家列表的单项选择框定义为 flask 中的 Python 变量应用程序。

基于 this thread ，我设法在 <script> 中将 Python 列表加载到 JavaScript在 flask 中使用以下代码标记:

def select():
    countries = ["UK", "US", "GER"]
    return render_template("select_menu.html", countries = json.dumps(countries))

然后我可以加载 countries显示在select_menu.html使用以下 JavaScript 语句:

var countries = {{countries | safe}}

但是，当我尝试将此方法与 Selectize.js 结合使用时，如下所示:

<script>
  $(document).ready(function()
  {
    var countries = {{countries | safe}};

    $("#search").selectize({
      valueField: 'val',
      labelField: 'val',
      searchField: ['val'],
      options: countries,
    });
  });
</script>

没有加载任何选项。 html 部分如下所示:

<div class='exampleSearch'>
  <select id="search">
<option value="">select</option>
  </select>

此外，上面的 Selectize.js 代码片段在我定义 countries 时工作正常在 JS 中为:

var countries = [{val:"UK"},
                {val:"US"},
                {val:"GER"}]

注意:在 flask 中定义 Python 列表这种方式没有帮助。

谁能告诉我应该如何定义我的 Python countries变量，这样我就可以将它加载到 JS 中并使用它来填充 Selectize 下拉列表。 非常感谢。

Answer 1

您的 Python 代码等同于以下内容:

json.dumps(["UK", "US", "GER"])

这将在 JS 中呈现为字符串列表:

["UK", "US", "GER"]

但是您正在使用的库需要一个对象列表:

[{val:"AppleScript"},
 {val:"Asp"},
 {val:"BASIC"}]

尝试将您的 Python select 函数替换为:

def select():
    countries = [
        {"val": "UK"},
        {"val": "US"},
        {"val": "GER"}
    ]
    return render_template("select_menu.html", countries = json.dumps(countries))