Jquery - 根据从两个下拉菜单中的选择显示 Json 值

Question

根据从第一个下拉菜单（学生姓名）中的选择 - 我想获得所选学生在第二个下拉菜单中选择的科目的具体分数。

请帮助我解决所需的逻辑。 谢谢你。

这是 html 代码

<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>

这是我正在使用的 jquery 代码

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);
    })

这是jsfiddle： https://jsfiddle.net/cutemuffin/rsh1bcno/3/

Answer 1

简化变量命名并从onchange函数内部删除学生和主题的声明到全局 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);
})