Question

我想知道是否可以在用户选择的选择字段中显示与该选项相关联的链接。我当前正在使用数据库来存储选项，并且每个选项在数据库中都有一个存储“额外”信息的类别。我以为额外的信息可能是有关所选项目的链接。然而，我不确定当用户在选择字段中选择项目时如何显示此链接。我还希望选择其他项目时更改链接。
我目前正在使用Flask，Flask-WTF，Flask-sqlalchemy，HTML和jsonify。

Answer 1

const fruits = {
  "1": { "colour": "yellow", "shape": "long" },
  "2": { "colour": "red", "shape": "round" }
};

const fruitSelect = document.getElementById('fruit');

function setFruitOptions() {
  if (fruitSelect.selectedIndex !== -1) {
    const fruit = fruits[fruitSelect.options[fruitSelect.selectedIndex].value];
    document.getElementById('shape').textContent = fruit.shape;
    document.getElementById('colour').textContent = fruit.colour;
  }
}
 
fruitSelect.addEventListener('change', setFruitOptions);
setFruitOptions();

<select id="fruit">
  <option value="1">banana</option>
  <option value="2">apple</option>
</select>
is <span id="shape"></span> and <span id="colour"></span>.

您可以使用模板中的以下内容在Flask中交付必要的JS对象：

<script>
  const fruits = {{ fruit_dict|tojson|safe }};
</script>

根据选择字段中的选定项目显示信息

1 个答案: