从 JSON 获取下拉列表的动态值
Get dynamic values from JSON for Drop-down list
有主题下拉列表,我已将它们硬编码在 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:
为了概括,除了检查 $("#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>');
}
您可以使用 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>
请在 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));
});
})
我已经用最适合您的代码更新了您的 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>');
}
}
}
})
有主题下拉列表,我已将它们硬编码在 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:
为了概括,除了检查 $("#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>');
}
您可以使用 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>
请在 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));
});
})
我已经用最适合您的代码更新了您的 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>');
}
}
}
})