Javascript 根據 HTML 中的兩個下拉選項動態顯示 JSON 數據

Question

我正在綁定一對下拉菜單（學生和科目），這些下拉菜單在選擇時會顯示學生對特定科目的分數。 當任一下拉菜單的選項發生更改時，顯示的標記應動態更改（無需單擊提交）。

學生的成績數據需要從 json 文件中提取。

output 標記需要顯示在 html 內。

JSON 數據

{
    "school": "Caldor School",
    "class": "Eleven",
    "student": {
        "sam": {"math": "75", "physics": "76", "chemistry": "37", "english": "76"},
        "chris": {"math": "30", "physics": "49", "chemistry": "31", "english": "45"},
        "ashley": {"math": "52", "physics": "98", "chemistry": "30", "english": "86"},
        "bert": {"math": "95", "physics": "63", "chemistry": "32", "english": "77"},
        "matt": {"math": "56", "physics": "34", "chemistry": "29", "english": "72"}
    }
}

HTML代碼

<html>
<head></head>
<body>
<select id="stud">
<option>Sam</option>
<option>Chris</option>
<option>Ashley</option>
<option>Bert</option>
<option>Matt</option>
</select>

<select id="subject">
<option>Math</option>
<option>Physics</option>
<option>Chemistry</option>
<option>English</option>
</select>

<div id="marks"></div>
</body>
</html>

誰能給我指出正確的方向？ 提前致謝！

Answer 1

選擇框有一個onchange事件，該事件在元素的值已更改時發生。 您可以嘗試類似下面的示例來獲取學生 ID 和主題。 下一步將是為學生解析 JSON 數據，然后為主題解析。

 function myFunction() { var x = document.getElementById("mySelect").value; document.getElementById("demo").innerHTML = "You selected: " + x; }

 <html> <body> <p>Select a new car from the list.</p> <select id="mySelect" onchange="myFunction()"> <option value="Audi">Audi</option> <option value="BMW">BMW</option> <option value="Mercedes">Mercedes</option> <option value="Volvo">Volvo</option> </select> <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p> <p id="demo"></p> </body> </html>

Javascript 根據 HTML 中的兩個下拉選項動態顯示 JSON 數據

問題描述

1 個解決方案

解決方案1
0 2021-01-27 05:07:40

Javascript 根據 HTML 中的兩個下拉選項動態顯示 JSON 數據

問題描述

1 個解決方案

解決方案1 0 2021-01-27 05:07:40

解決方案1
0 2021-01-27 05:07:40