根据表单的选定项动态更改表单字段的最大值（CS50 PSET8 Finances）

Question

我有一个表单，下拉菜单的选项从字典列表中提供给它。每个 dict 都有一个 ["symbol"] 和一个 ["shares"] 项。下拉选项通过 for 循环进行循环。

我正在尝试这样做，因此当我从下拉菜单中选择一个选项时，以下表单字段的最大输入会更新为相应的 ["shares"] 值。

到目前为止，我所拥有的如下。我知道我的函数不正确，但我的问题是我真的不知道如何使用 document.getElementById 从我的字典列表中访问特定项目并获取“shares”值。

    <script type="text/javascript">
    function updateMax() {
  var select = document.getElementById('symbol').innerText; // symbol selected
  const article = document.querySelector('select.val');  // finding article with symbol
  var maxi = article.dataset.shares; // getting maximum value
  var field = document.getElementById('shares');

     field.max = maxi

}
    </script>
    <form action="/sell" method="post">
        <div class="form-group">
            <select name="symbol" id="symbol" onchange="updateMax()">
                <option disabled selected value="">Symbol</option>
                  {% for row in portfolio %}
                     <article>
                       id="{{ row["symbol"] }}"
                       shares="{{ row["shares"] }}"
                     </article>
                <option value="row.symbol">{{ row["symbol"] }}</option>
                 {% endfor %}

            </select>
        </div>
        <div class="form-group">
            <input id="shares" autocomplete="off" min="0" max="" name="shares" placeholder="Shares" type="number">
        </div>
        <button class="btn btn-primary" type="submit">Sell</button>
    </form>

我尝试按照以下评论的说明进行操作。我不确定我是否可以像这样在循环内创建，或者如果我不能，我不确定其他选项会是什么。

感谢任何反馈。

Answer 1

良好的用户体验！这个函数

 function updateMax() {
     var select = document.getElementById('symbol');
     var field = document.getElementById('shares');
     field.max = select.options[select.selectedIndex].value; }

有很大的希望；只有一个问题。根据MDN doc 的一个选项的value 是：

价值

如果选择此选项，此属性的内容表示要与表单一起提交的值。如果这个属性是 省略，取值取自选项的文本内容 元素。

基本上它只会返回symbol。

也许探索 HTML 用户定义属性 data-*。再次来自MDN doc

HTML5 在设计时考虑了数据的可扩展性 与特定元素相关联，但不需要有任何定义 意义。 data-* 属性允许我们存储额外的信息 标准的语义 HTML 元素，没有其他技巧，例如 非标准属性，DOM 上的额外属性，或 Node.setUserData().

将共享添加为每个选项的用户定义属性，java 脚本将可以访问它需要的所有内容。比如：

<option data-shares="{{ row["shares"] }}" value="row.symbol">{{ row["symbol"] }}</option>

然后可以在 javascript 中使用 dataset 属性访问它，例如：HTMLelement.dataset.shares

第二个脚本有问题：javascript 无法访问 python 变量。