0

我有一个表格，用户可以根据他们的位置以固定成本运送托盘。目前这是针对英国和法国的。对于每个国家/地区，它们被分成 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,
    ]

因此，理想情况下，如果用户选择 UK Zone 1（单选按钮）然后选择 France Zone 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/

4

3 回答 3

0

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

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

这是二维数组（又名数组数组）的语法。

您还需要确保组中的所有单选按钮都具有相同的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>
于 2013-12-12T15:31:39.023 回答
0

你走的是正确的方式，但你需要为你打算将它们分组的单选按钮提供相同的名称，以便第一组单选按钮变成这样

在此处输入代码

<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]
于 2013-12-12T15:23:39.637 回答
0

使用这个 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" />

当用户单击按钮时调用此方法

于 2013-12-12T15:42:28.043 回答