时间戳

首页 > 解决方案 > 根据表单的选定项动态更改表单字段的最大值（CS50 PSET8 Finances）

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

问题描述

我有一个表单，下拉菜单的选项是从字典列表中提供给它的。每个 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>

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

我很感激任何反馈。

标签： javascriptformscs50

解决方案

好的用户体验！这个功能

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

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

价值

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

从本质上讲，它只会symbol回馈。

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

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

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

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

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

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

推荐阅读