javascript - Jquery - Display Json Values based on Selection from Two Dropdown menus

Question

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

Answer 1

Simplify variables naming and remove declaration of student and subject from inside onchange functions to global scope.

var obj, student, subject, y, z, x;

var name = $("#stu").on("change", function() {
  student = $(this).val();
  $("#results1").html("You selected: " + student);
})

$("#subjct").on("change", function() {
  subject = $(this).val();
  var z = obj.student[student][subject];
  $("#value2").html("value: " + z);
  $("#results2").html("You selected: " + subject);
})