使用Python创建的数组中的HTML填充下拉列表-CS50 Finance

问题描述

我正在处理cs50财务问题，需要创建一个动态的下拉列表，并且该列表根据用户而有所不同。目的是从数据库中获取用户的股票并将这些选项放在下拉菜单中。

现在，我的html文件中包含以下代码，其中“符号”是取自我的python文件的数组：

<form action="/sell" method="post">
    <div class="form-group">
        <select class="form-control" name="symbol">
            <option disabled selected value="Symbol">Symbol</option>

        </select>
    </div>
    <div class="form-group">
        <input autocomplete="off" class="form-control" min="0" name="shares" placeholder="Shares" type="number">
    </div>
    <button class="btn btn-primary" type="submit">Sell</button>
</form>
<script>
    var select = document.getElementByName("symbol");
    var options = {{ symbols }};

    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }
</script>

当我在单独的div中打印“符号”数组以确保值正确时，它会正确打印以显示两种股票：['AAPL''F']

但是，下拉列表将不会填充。当我进入Javascript控制台时，在“ var options = {{符号}};”处出现错误。行，因为撇号由“'”表示，而javascript无法识别。我认为这是阻止我的代码填充下拉列表的原因。

我尝试使用列表而不是数组，删除了python中的撇号，甚至使用了PHP，但是没有任何效果。有什么想法吗？

解决方法

如果您使用Jinja或类似的模板语言，这将使用您的Symbols数组在模板中创建选项项：

<div class="form-group">
<select class="form-control" name="symbol">
    <option disabled selected value="Symbol">Symbol</option>
       {% for option in symbols %}
       <option value={{option}}>{{option}}</option>
       {% endfor %}
</select>
</div>