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

Question

我正在使用 flask 构建一个网络应用程序，并试图填充一个 Selectize.js 单个项目 select 框，其中包含定义为 Python 的国家/地区列表flask 应用程序中的变量。

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

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

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

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>

此外，当我在 JS 中将 countries 定义为：

时，上述 Selectize.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))

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

Populating Selectize.js Dropdown with Flask

javascript

python

html-select

flask

selectize.js