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

请打开下面这个Fiddle：

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

请在 select 选项等级上添加删除请检查您的 jsfiddle 更新 link 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>');
            }
        }
    }   
})

从 JSON 获取下拉列表的动态值

Get dynamic values from JSON for Drop-down list

javascript

jquery

jsfiddle