对于误导性的标题很抱歉,但我不确定如何写它.
我有下表…
我想生成一个简单的计算器,比较来自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');
});
如果你选择法语和5a你会在输出中获得5.8和V-Diff ……
解决方法
肯定有不同的方法可以做到这一点,但在我看来,它归结为数据结构.我个人的看法是使用具有一系列成绩的国家/地区的数据结构.然后,成绩实际上是成对(显示值/实际值)以说明数据中的差距.这里的技巧是我们不想在select中显示空显示值,但我们确实需要数据(实际值)进行转换.在那之后,jQuery的东西很简单.
这样的数据：
var countryGrades = [
{ country : "France",grades : [
["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.7","5.7"],["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,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/
