Based on the selection from 1st dropdown menu (Student Names) - I want to get the specific marks of the selected student for the subject chosen in the 2nd dropdown menu.
Kindly help me out with the logic needed. Thank you.
This is the html code
<label for="stu">Subject: </label>
<select id="stu">
<option>Please select</option>
<option>sam</option>
<option>chris</option>
<option>ashley</option>
<option>bert</option>
<option>matt</option>
</select>
<div id="results1"></div>
<div id="value1"></div>
<label for="subjct">Subject: </label>
<select id="subjct">
<option>Please select</option>
<option>math</option>
<option>physics</option>
<option>chemistry</option>
<option>english</option>
</select>
<div id="results2"></div>
<div id="value2"></div>
Here is the jquery code which I'm using
var obj, selected, selected1, student, y, z, x;
obj = {
"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"}
}
};
var name = $("#stu").on("change", function(){
var selected1 = $(this).val();
var y = obj.student[selected1];
$("#results1").html("You selected: " + selected1);
return this.selected1;
})
$("#subjct").on("change", function(){
var selected_student = y;
var selected2 = $(this).val();
var z = obj.student[selected_student][selected2];
$("#value2").html("value: " + z);
$("#results2").html("You selected: " + selected2);
})
Here is the jsfiddle : https://jsfiddle.net/cutemuffin/rsh1bcno/3/
question from:
https://stackoverflow.com/questions/65917485/jquery-display-json-values-based-on-selection-from-two-dropdown-menus 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…