Javascript 二维数组有助于输出值

我有一个表单，用户可以根据他们的位置以固定成本运送托盘。目前这是针对英国和法国的。对于每个国家，它们分为4个区域

我们有一张这样的桌子：

我在想最好的方法就是创建一个二维数组，就像这样：

var values = array[
        [1][1] = 20,
        [1][2] = 25,
        [1][3] = 35,
        [1][4] = 40,

        [2][1] = 36,
        [2][2] = 42,
        [2][3] = 50,
        [2][4] = 56,

        [3][1] = 42,
        [3][2] = 56,
        [3][3] = 52,
        [3][4] = 68,

        [4][1] = 60,
        [4][2] = 70,
        [4][3] = 68,
        [4][4] = 72,
    ]

因此，理想情况下，如果用户选择英国1区单选按钮，然后选择法国3区单选按钮，则输出值将为35

表格：

我遇到的问题是如何将其输出给用户？使用二维数组正确吗？还是我完全走错了方向

JsFiddle：

---

您正在以正确的方式进行操作，但是您需要为单选按钮指定与您打算对其进行分组的单选按钮相同的名称，这样第一组单选按钮就会变成这样

在这里输入代码

<form id="uk_zones">
  <div><input type="radio" name="uk_zone1" value="1">UK zone 1</div>`<br />`
  <div><input type="radio" name="uk_zone1" value="2">UK zone 2</div>`<br />`
  <div><input type="radio" name="uk_zone1" value="3">UK zone 3</div>`<br />`
  <div><input type="radio" name="uk_zone1" value="4">UK zone 4</div>`<br />`
</form>

---

您需要将数组定义更改为以下内容：

var值=[[20,25,35,40]，[36,42,50,56]，[42,56,52,68]，[60,70,68,72]

这就是二维数组的语法，也就是数组数组

您还需要确保组中的所有单选按钮具有相同的名称，在本例中为uk_zone和fr_zone

完成此操作后，您需要记住数组索引是基于0的，因此您应该将单选按钮上的值更改为0到3，或者您可以获取该值并减去1，然后再将其应用于数组以检索正确的值：

var ukValue = document.querySelector('input[name="uk_zone"]:checked').value;
var frValue = document.querySelector('input[name="fr_zone"]:checked').value;

if(ukValue && frValue)
{
    alert(values[ukValue-1][frValue-1]);
}

您可以将上述代码放入名为updateValue的函数中，然后将其设置为每个表单的onChange侦听器：

<form id="uk_zones" onChange="updateValue();">
    <div><input type="radio" name="uk_zone" value="1">UK zone 1</div>
    <div><input type="radio" name="uk_zone" value="2">UK zone 2</div>
    <div><input type="radio" name="uk_zone" value="3">UK zone 3</div>
    <div><input type="radio" name="uk_zone" value="4">UK zone 4</div>
</form>

<br />


<form id="fr_zones" onChange="updateValue();">
    <div><input type="radio" name="fr_zone" value="1">France zone 1</div>
    <div><input type="radio" name="fr_zone" value="2">France zone 2</div>
    <div><input type="radio" name="fr_zone" value="3">France zone 3</div>
    <div><input type="radio" name="fr_zone" value="4">France zone 4</div>
</form>

使用这个javascript

var index1 = document.querySelector('input[name="uk_zone1"]:checked').value;
var index2 = document.querySelector('input[name="fr_zone1"]:checked').value;
array[index1][index2]

 function didplay() {
   var index1 = document.querySelector('input[name="uk_zone1"]:checked').value;
   var index2 = document.querySelector('input[name="fr_zone1"]:checked').value;
   document.getElementById("text1").style.visibility = "visible";
   document.getElementById("text1").value = array[index1][index2]
 }

在主体标记中包含文本框

<input type="text" id="text1" style="visibility:hidden" />

---

当用户单击按钮时，您可以调用此方法，非常感谢，唯一的问题是我对JavaScript非常陌生。我有点挣扎。使用您的代码，我将如何向用户显示此内容。我正在考虑禁用文本字段。但不知道如何使用您的示例来实现此目的。非常好，谢谢，它现在正在处理警报，但我收到了此错误-Uncaught TypeError:无法读取null的属性“value”any ideas？您确定将所有单选按钮命名为“uk_zone”或“fr_zone”吗？如果不是，那就可以解释问题了。明白了，它不是在数组的末尾添加一个。如果我在哪里取出警报功能，并让它填充文本框，这会很简单吗。。谢谢你的帮助

<input type="text" id="text1" style="visibility:hidden" />