Javascript - 使用 2 select 访问数组元素

Question

我试过了，但没用。它为我提供了一个包含字母的数组。

例如，当我选择“B”和“1”时，结果是“B”而不是“40”。

我不明白为什么？

谢谢你的帮助

$(document).ready(function () {
         
                var A = [10, 20, 30];
                var B = [40, 50, 60];
                var C = [70, 80, 90];
             
                         
                var letter = $('#letter option:selected').val();
                var index = $('#index option:selected').val();
                var result = letter[index];
                $('#result').val(result);
                             
            $( "#letter,#index" ).change(function() {
                var letter = $('#letter option:selected').val();  //For example : "B" selected
                var index = $('#index option:selected').val();  //For example : "1" selected
                var result = letter[index]; 
                $('#result').val(result);  // result is "B" and not "40"
                 
            });
             
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

     
        <table>
            <tr>
                <td>
                    <select name="letter" id="letter">
                        <option value="A" id="A">A</option>
                        <option value="B" id="B">B</option>
                        <option value="C" id="C">C</option>                                
                    </select>
                </td>
                <td>
                    <select name="index" id="index">
                        <option value=0 id="c1">1</option>
                        <option value=1 id="c2">2</option>
                        <option value=2 id="c3">3</option>
                    </select>
                </td>
                <td>
                    <input type="text"  value="" id="result" disabled/>
                </td>
            </tr>
        </table>

Answer 1

我会使用关联数组将字母选择与数组联系起来。这比为每个数组定义单独的数组更容易。

$(document).ready(function () {
  var array = {A:[10, 20, 30],
              B:[40, 50, 60],
              C:[70, 80, 90]};
  $( "#letter,#index" ).change(function() {
    var letter = $('#letter option:selected').val();
    var index = $('#index option:selected').val();
    var result = array[letter][index];
    $('#result').val(result);
  }).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>     
<table>
    <tr>
        <td>
            <select name="letter" id="letter">
                <option value="A" id="A">A</option>
                <option value="B" id="B">B</option>
                <option value="C" id="C">C</option>                                
            </select>
        </td>
        <td>
            <select name="index" id="index">
                <option value="0" id="c1">1</option>
                <option value="1" id="c2">2</option>
                <option value="2" id="c3">3</option>
            </select>
        </td>
        <td>
            <input type="text"  value="" id="result" disabled/>
        </td>
    </tr>
</table>