Question

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

所以我们有一个这样的表：

enter image description here

我认为最好的方法是以某种方式创建一个二维数组：

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。

形式：

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

<br />


<form id="fr_zones">
    <div><input type="radio" name="fr_zone1" value="1">France zone 1</div>
    <div><input type="radio" name="fr_zone2" value="2">France zone 2</div>
    <div><input type="radio" name="fr_zone3" value="3">France zone 3</div>
    <div><input type="radio" name="fr_zone4" value="4">France zone 4</div>
</form>

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

JsFiddle：

http://jsfiddle.net/barrycorrigan/ZXHbq/

Answer 1

你正在以正确的方式前进，但是你需要为你打算将它们分组的单选按钮给出相同的名称，这样第一组无线电按钮就会变成这样的

在这里输入代码

<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>

同样你必须修改第二个。

并显示数组中的值，在javascript中使用此代码

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

Answer 2

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

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

这是二维数组的语法（AKA是一个数组数组）。

您还需要确保组中的所有单选按钮都具有相同的name，在这种情况下为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>

Answer 3

使用此javascript

 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" />

当用户点击按钮

时，您会调用此方法

二维数组有助于输出值

3 个答案: