Question

对于误导性的标题感到抱歉，但我不确定如何写它。

我有下表...

enter image description here

我想生成一个简单的计算器，用于比较来自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 ...

Answer 1

在我看来，粉碎的解决方案最实用。您可以在单个变量中定义数据，然后使用它来填充两个SELECT。但是，考虑到迈克尔的解决方案可以适应更好的降级：我采用crush的解决方案，如果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);

这是一个更新的sample fiddle - 抱歉，第一个网址错误了 - 而且HTML非常小：

Choose your country: <select id="countrySelect"></select>
<br />
Choose your grade: <select id="gradeSelect"></select>

Answer 2

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

Answer 3

有一些不同的方法可以做到这一点，但在我看来，它归结为数据结构。我个人的看法是使用具有一系列成绩的国家/地区的数据结构。然后，成绩实际上是成对（显示值/实际值）以说明数据中的差距。这里的技巧是我们不想在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/

Answer 4

根据我的理解，添加我的2便士来访问数据，并希望它有用。

保留数据，如每个第一个选择值和等级值数组。

 var data = { 
 fr :new Array("4","4","5a","5a+", "5b","5b+","5c","5c+","6a","6a+", "6b"),  

 usa : new Array(  "5.6","5.6","5.7", "5.7","5.8", "5.8", "5.9", "5.10a", "5.10b","5.10c", "5.10d"), 

 gb : new Array (  "", "Mod","Diff","V-Diff", "4a","4b", "4b VS", "4c HVS", "5a E1", "","")                            

};

然后编写方法以在国家/地区点击时填充该等级。

function populate(val)
{    
      $("#grade").empty();   
    var array = data[val];   
   for(var a=0; a<array.length; a++ ) {
     $("#grade").append('<option value="'+ a +  '">' +  array[a] + '</option>');
}    
 }    
}

并调用类似::

的方法

$("document").ready(function () { populate('usa'); } );
$('.country').on('change', function(){
    populate($(this).val());  
});

Html会很简单（只有国家你需要填写[你可以编写方法来在文件准备中将它们打包]。这是打印所有内容以选择索引的输出方式：{按你的预期o /我的理解是你在滑动空值，你可以在这里添加那个cond，如果这样的话：if（data [a] [index] ==''）data [a] [index + 1]（虽然你必须照顾阵列len等）}

$('input[type="submit"]').on('click', function(e){
    e.preventDefault();
    var index = $('#grade').find(":selected").val();
     var str = "";
     for(var a in data)
     {         
        str  = str +" " + $('.country option[value="' + a + '"]').html() 
        +" " + data[a][index];
    }
    $('p').text('Values output here ' + str);
 });

DEMO

Answer 5

好的，我不知道你想要什么。但我尝试使用html table + jQuery，这就是你能得到的。

DEMO http://jsfiddle.net/yeyene/xEzLv/

您只需要3个if语句并查看结果。

$('.country').on('change', function(){
    $('.hiddenGrade').hide();
    $('#s_'+$(this).val()).show();
    $('#cn').val($(this).val());
    $('#result').val('');
});
$('.hiddenGrade').on('change', function(){
    $('#cn_val').val($(this).val());
    $('#chart tr').css('background', 'none');
    $('#chart tr').eq($(this).val()).css('background', 'green');
});

$('input[type="submit"]').on('click', function(e){
    e.preventDefault();
    if($('#cn').val() === '0'){
        $('#result').val(
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(1).text()+', '+
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(2).text()   
        );
    }
    if($('#cn').val() === '1'){
        $('#result').val(
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(0).text()+', '+
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(2).text()   
        );
    }
    if($('#cn').val() === '2'){
        $('#result').val(
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(0).text()+', '+
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(1).text()   
        );
    }
});

Answer 6

我不喜欢其他答案所具有的巨大代码。检查小提琴http://jsfiddle.net/vittore/kP249/1/。

Just put data in table:

<select id='country'>
    <option value="0">Fr</option>
    <option value="1">Us</option>
    <option value="2">Uk</option>
</select>
<input id='score' type="text" />    

<table id="results">
    <thead><tr><td>Fr</td><td>Us</td><td>Uk</td></tr></thead><tbody>
    <tr><td>4</td><td>5.6</td><td></td></tr>
    <tr><td>4</td><td>5.6</td><td>Mod</td></tr>
    <tr><td>5a</td><td>5.7</td><td>Diff</td></tr>
    <tr><td>5a+</td><td>5.7</td><td>V-Diff</td></tr>
    <tr><td>5b</td><td>5.8</td><td>4a</td></tr>
    <tr><td>5b+</td><td>5.8</td><td>4b</td></tr>
    <tr><td>5c</td><td>5.9</td><td>4b VS</td></tr>
    <tr><td>5c+</td><td>5.10a</td><td>4c HVS</td></tr>
    <tr><td>6a</td><td>5.10b</td><td>5a E1</td></tr>
    <tr><td>6a+</td><td>5.10c</td><td></td></tr>                   
</tbody></table>

添加一点javascript：

var $score = $('#score'), $country = $('#country')
  , $results = $('#results'), $rows = $results.find('tbody tr')

$rows.hide()

$results.on('scoreChanged', function(e, country, score) {
    $rows.hide().filter(function(i) {
        return $(this).find('td:eq(' + country + ')').text() == score
    }).show()
})

$score.on('submit, blur', function(e) {
  $results.trigger('scoreChanged', [$country.val(), $score.val()])  
})

$country.on('changed', function(e) {
  $results.trigger('scoreChanged', [$country.val(), $score.val()])  
})

注意：您可以稍微更改过滤条件并显示更友好的结果（fiddle）：

$results.on('scoreChanged', function(e, country, score) {
    $rows.hide().filter(function(i) {
        return $(this).find('td:eq(' + country + ')').text().contains(score)
    }).show()
})

Answer 7

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        $(function(){

            var values = [['', '', ''], ['4', '5.6', 'x'], ['5a', '5.7', 'dif']];
            var countries = ['-', 'fr', 'us', 'uk'];
            var jq_country =  $('.country'), jq_grade = $('.grade');

            $.each(countries, function(index, val){
               jq_country.append('<option data-index="' + index + '">' + val + '</option>');                
            });

            var curr_col, curr_index;

            jq_country.change(function() {
                jq_grade.empty();     
                $('.result').val('');

                curr_col = parseInt($(this).find('option:selected').data('index')) - 1;     

                if (curr_col >= 0) {

                    $.each(values, function(index, val) {

                        jq_grade.append('<option ' + (index == curr_index ? 'selected' : '' ) +  ' value="' + index + '">' + val[curr_col] + '</option>')   
                    });


                    jq_grade.change();
                }

            });

            jq_grade.change(function() {
                curr_index = parseInt(jq_grade.val());
                if (curr_index) {
                    var result = '';
                    $.each(countries.slice(1), function(index, val){
                        if (index != curr_col) result += val + ':' + values[curr_index][index] + ';';
                    });

                    $('.result').val(result);
                }
                else {
                    $('.result').val('');
                }
            });            

        })
    </script>

</head>
<body>
    <form method="post">
       <select class="country"></select>
      <select class="grade"></select>
      <input type="text" class="result" />
   </form>

</body>
</html>

使用jQuery，XML，JSON，JS遍历表

7 个答案:

DEMO http://jsfiddle.net/yeyene/xEzLv/