從JSON獲取動態值以獲取下拉列表

Question

有一個主題下拉列表，我在IF condition它們進行了硬編碼。 我正在嘗試從JSON動態獲取值到下拉列表？

   function testMessage(){
       var mysel = $("#sub_select option:selected" ).text()
       console.log(mysel); 
       if($( "#sub_select option:selected" ).text() == "Maths"){
             for (var i = 0; i < data[0].Grades.length; i++) { 
                $('#grade_select').append('<option>'+data[0].Grades[i]+'</option>');  
            } 
        }      
       else if($( "#sub_select option:selected" ).text()=="Chemistry"){
           $('#grade_select option').remove();
            for (var i = 0; i < data[1].Grades.length; i++) { 
                $('#grade_select').append('<option>'+data[1].Grades[i]+'</option>');  
            } 
        }
    }

請在下面打開此小提琴：

http://jsfiddle.net/pjxhk10u/

Answer 1

為了概括起見，除了檢查$("#sub_select option:selected").text()等於什么之外，還需要一種獲取data[x]的x的方法。 一種解決方案是向每個選項元素添加dataIndex="i"屬性。

更改

$('#sub_select').append('<option id='+data[i].Subject+'>'+data[i].Subject+'</option>');

至

$('#sub_select').append('<option dataIndex="'+i+'" id='+data[i].Subject+'>'+data[i].Subject+'</option>');

然后，我們可以用泛化替換硬編碼的if語句。

更改

if($( "#sub_select option:selected" ).text() == "Maths"){
  for (var i = 0; i < data[0].Grades.length; i++) { 
    $('#grade_select').append('<option>'+data[0].Grades[i]+'</option>');  
  } 
}      
else if($( "#sub_select option:selected" ).text()=="Chemistry"){
  $('#grade_select option').remove();
  for (var i = 0; i < data[1].Grades.length; i++) { 
    $('#grade_select').append('<option>'+data[1].Grades[i]+'</option>');  
  } 
}

至

const selectedOption = $('#sub_select option:selected');
const dataIndex = selectedOption.attr('dataIndex');
$('#grade_select option').remove();
for (var i = 0; i < data[dataIndex].Grades.length; i++) { 
  $('#grade_select').append('<option>'+data[dataIndex].Grades[i]+'</option>');  
} 

Answer 2

您可以使用find()獲取主題數據並將其綁定到您的下拉列表中：

 $(document).ready(function() { var data = [{ "Grades": ["3", "2", "1", "7", "6", "5", "4", "9", "8", "10"], "Subject": "Maths" }, { "Grades": ["9", "10"], "Subject": "Chemistry" }]; console.log(JSON.stringify(data)); for (var i = 0; i < data.length; i++) { $('#sub_select').append('<option id=' + data[i].Subject + '>' + data[i].Subject + '</option>'); } $('#sub_select').on('change', testMessage); function testMessage() { var mysel = $("#sub_select option:selected").text(); console.log(mysel); var dropDownData = data.find(function (element) { return element.Subject == mysel }); $('#grade_select').append('<option>Grades...</option>'); if (dropDownData != null) { $('#grade_select option').remove(); for (var i = 0; i < dropDownData.Grades.length; i++) { $('#grade_select').append('<option>' + dropDownData.Grades[i] + '</option>'); } } } $.each(data, function(i, option) { $('#sel').append($('<option/>').attr("value", option.subjectValue).text(option.subjectGrade)); }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="mongoreport" method='POST'> <select id="sub_select" name="selsub" value="subjectValue"> <option>Subjects...</option> </select> <br> <select id="grade_select" name="selgrade" value="subjectGrade"> <option>Grades...</option> </select> <input name="submit" type="submit" value="submit" /> </form> 

Answer 3

請在選擇的選項等級上添加刪除，請檢查您的jsfiddle鏈接http://jsfiddle.net/pjxhk10u/

var data = [{"Grades":["3","2","1","7","6","5","4","9","8","10"],"Subject":"Maths"},{"Grades":["9","10"],"Subject":"Chemistry"}];

    console.log(JSON.stringify(data));

    for (var i = 0; i < data.length; i++) { 
        $('#sub_select').append('<option id='+data[i].Subject+'>'+data[i].Subject+'</option>');  
    }
       $('#sub_select').on('change',testMessage);   

       function testMessage(){
           var mysel = $("#sub_select option:selected" ).text()
           console.log(mysel); 
           if($( "#sub_select option:selected" ).text() == "Maths"){
          $('#grade_select option').remove(); // add this

                 for (var i = 0; i < data[0].Grades.length; i++) { 
                    $('#grade_select').append('<option>'+data[0].Grades[i]+'</option>');  
                } 

            }      
           else if($( "#sub_select option:selected" ).text()=="Chemistry"){
               $('#grade_select option').remove();
                for (var i = 0; i < data[1].Grades.length; i++) { 
                    $('#grade_select').append('<option>'+data[1].Grades[i]+'</option>');  
                } 
            }
        }

     $.each(data, function(i, option) {
            $('#sel').append($('<option/>').attr("value", option.subjectValue).text(option.subjectGrade));
        });
})

Answer 4

我已經用適合您的代碼更新了您的JSFiddle。 JSFiddle

$(document).ready(function () { 
    var data = [
     {"Grades":["3","2","1","7","6","5","4","9","8","10"],"Subject":"Maths"},
     {"Grades":["9","10"],"Subject":"Chemistry"}];

  var subGrade = {};
  $.each(data, function(index, value) {
      $.each(value, function(k, v){
          subGrade[value["Subject"]] = value["Grades"];
      })
  })

    for (var i = 0; i < data.length; i++) { 
          $('#sub_select').append('<option id='+data[i].Subject+'>'+data[i].Subject+'</option>');  
    }

    $('#sub_select').on('change',testMessage);  

    function testMessage(){
        var mysel = $("#sub_select" ).val();    
        if (subGrade.hasOwnProperty(mysel)) {
            $('#grade_select option').remove();
            var options = subGrade[mysel];
            for (var i=0; i<options.length; i++) {
                $('#grade_select').append('<option>'+options[i]+'</option>');
            }
        }
    }   
})