使用jQuery，XML，JSON，JS遍历一个表
对不起，误导性的标题，但我不确定如何写它。
我有下面的表格......
我想制作一个简单的计算器，比较2个给定参数中的所有数据。
我会要求我的用户先选择一个国家，然后在该列中选择一个值。 做完这些之后，您可以提交表单，并从该行输出正确的值。
我做了一个小提琴试图展现我的意思......
http://jsfiddle.net/SLCaN/2/
做这个的最好方式是什么？ 我知道的唯一方法是拥有一个巨大的if / else语句，这将使我永远写作。
$('.country').on('change', function(){
// If USA show corrent dropdown
if( $(this).val() == 'usa'){
$('.hiddenGrade').hide();
$('.iniValusa').show();
} else if( $(this).val() == 'gb'){
$('.hiddenGrade').hide();
$('.iniValgb').show();
} else {
$('.hiddenGrade').hide();
$('.iniValfr').show();
}
});
$('input[type="submit"]').on('click', function(e){
e.preventDefault();
$('p').text('Values output here');
});
如果你选择French和5a+你会在输出中得到5.8 and V-Diff ...
这样做肯定有不同的方式，但在我看来，这归结于数据结构。 我个人的看法是采用具有一系列等级国家的数据结构。 然后，这些成绩实际上是成对的（显示值/实际值），以说明数据中的差距。 这里的诀窍是我们不想在select中显示空的显示值，但我们确实需要用于转换的数据（实际值）。 之后，jQuery的东西很简单。
像这样的数据：
var countryGrades = [
{ country : "France", grades : [
["4", "4"],
["", "4"],
["5a", "5a"],
["5a+", "5a+"],
["5b", "5b"],
["5b+", "5b+"],
["5c", "5c"],
["5c+", "5c+"],
["6a", "6a"],
["6a+", "6a+"],
["6b", "6b"]
]},
{ country : "USA", grades : [
["5.6", "5.6"],
["", "5.6"],
["5.7", "5.7"],
["", "5.7"],
["5.8", "5.8"],
["", "5.8"],
["5.9", "5.9"],
["5.10a", "5.10a"],
["5.10b", "5.10b"],
["5.10c", "5.10c"],
["5.10d", "5.10d"]
]},
{ country : "UK", grades : [
["", ""],
["Mod", "Mod"],
["Diff", "Diff"],
["V-Diff", "V-Diff"],
["4a", "4a"],
["4b", "4b"],
["4b VS", "4b VS"],
["4c HVS", "4c HVS"],
["5a E1", "5a E1"],
["", ""],
["", ""]
]}
];
事件处理等是这样的：
function loadGrades(countryGradesIndex) {
var gradeSelect = $("#grade");
gradeSelect.empty();
$.each(countryGrades[countryGradesIndex].grades, function(index, grade) {
if (grade[0] != "") {
gradeSelect.append($("<option></option>").attr("value", index).text(grade[0]));
}
});
}
$.each(countryGrades, function(index, countryGrade) {
$("#country").append($("<option></option>").attr("value", index).text(countryGrade.country));
});
$("#country").on("change", function() {
loadGrades($("#country").val());
});
loadGrades(0);
$("#convert").on("click", function() {
var gradeIndex = $("#grade").val();
var gradeConversion = "";
$.each(countryGrades, function(countryGradesIndex) {
gradeConversion += countryGrades[countryGradesIndex].country + ": " + countryGrades[countryGradesIndex].grades[gradeIndex][1] + "<br>";
});
$("#conversions").html(gradeConversion);
});
在这里查看一个可用的JSFiddle：http://jsfiddle.net/tetonraven/SVj63/
Iserni的答案非常接近您的需求，我认为他们错过了输出部分，除非我正在阅读/理解错误的代码。
为了适应这个答案，我会改变数据结构为：
var grades = [
{'fr': "4", 'usa': "5.6",'gb': ""},
{'fr': "4", 'usa': "5.6",'gb': "Mod"},
{'fr': "5a", 'usa': "5.7",'gb': "Diff"},
{'fr': "5a+", 'usa': "5.7",'gb': "V-Diff"},
{'fr': "5b", 'usa': "5.8",'gb': "4a"},
{'fr': "5b+", 'usa': "5.8",'gb': "4b"},
{'fr': "5c", 'usa': "5.9",'gb': "4b VS"},
{'fr': "5c+", 'usa': "5.10a",'gb': "4c HVS"},
{'fr': "6a", 'usa': "5.10b",'gb': "5a E1"},
{'fr': "6a+", 'usa': "5.10c",'gb': ""},
{'fr': "6b", 'usa': "5.10d",'gb': ""}];
然后在你的点击事件中，像这样的东西会让你获得翻译的值（你需要适应一下）
$('input[type="submit"]').on('click', function(e){
e.preventDefault();
var matches = $.grep(grades,function(e) {
return e[$(".country").val()] == $('.iniValusa').val()
});
if(matches.length == 1)
{
$('p').text('USA: ' + matches[0].usa + ' GB: ' + matches[0].gb + 'FR: ' + matches[0].fr);
}
});
暗恋的解决方案对我来说似乎是最实际的。 您可以在单个变量中定义数据，然后使用它来填充两个SELECT。 但是，考虑到迈克尔的解决方案可以适应更好的降级：如果Javascript被禁用，我会采取暗恋的解决方案，为您提供一个空白页面。
您将所有数据都保存在一个Javascript对象中，并且这些值被编入索引，以便相同的等级具有相同的索引（表中的行号）：
4: "quatrième valeur pour les français",
...
4: "Fourth value for UK",
这种方法可以更容易地“翻译”（我相信）一个数组到另一个数组，即您选择法国，获得等级5b，将法国更改为美国：数值保持不变，这意味着显示的等级更改为相应的值在新的国家。
另外，您将所有数据保存在一个地方。
对于大型国家数组，我建议将grades[countryCode]转换成AJAX调用，以从服务器获取特定国家/地区。 您还需要另一个AJAX调用才能从服务器获取代码。
var grades = {
fr: {
name: 'France',
values: {
0: "4",
1: "4",
2: "5a",
3: "5a+",
4: "5b",
5: "5b+",
6: "5c",
7: "5c+",
8: "6a",
9: "6a+",
10: "6b"
}
},
us: {
name: 'USA',
values: {
0: "5.6",
1: "5.6",
2: "5.7",
3: "5.7",
4: "5.8",
5: "5.8",
6: "5.9",
7: "5.10a",
8: "5.10b",
9: "5.10c",
10: "5.10d"
}
},
'gb': {
name: 'UK',
values: {
0: "",
1: "Mod",
2: "Diff",
3: "V-Diff",
4: "4a",
5: "4b",
6: "4b VS",
7: "4c HVS",
8: "5a E1",
9: "",
10: ""
}
}
}
function setSelectTo(country) {
// TODO: verify that country is indeed in grades
var data = grades[country].values;
var $el = $("#gradeSelect");
$cur = $el.val();
$el.empty();
$.each(data, function(value, text) {
$el
.append($("<option></option>")
.attr("value", value)
.text(text));
});
// Restore value
$el.val($cur);
}
function populateCountrySelect() {
var $el = $("#countrySelect");
$el.empty();
$.each(grades, function(code, data) {
$el
.append($("<option></option>")
.attr("value", code)
.text(data.name));
});
}
$('#countrySelect').on('change', function(){
setSelectTo($(this).val());
});
populateCountrySelect();
$('#countrySelect').val('us');
setSelectTo('us');
$('#gradeSelect').val(2);
这是一个更新的示例小提琴 - 抱歉，第一个URL是错误的 - 并且HTML非常小：
Choose your country: <select id="countrySelect"></select>
<br />
Choose your grade: <select id="gradeSelect"></select>