二維數組幫助輸出值

Question

我有一個表單，用戶可以根據它們的位置將托盤運送到固定成本。目前這是英國和法國。對於每個國家，他們被分成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.

形式：

<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

你會想你的數組定義更改爲以下：

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

這句法的2維數組（也是數組的數組）。

你還需要確保所有組中的單選按鈕具有相同的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的函數中，然後設置th在該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 2

你要在一個正確的方式，但你需要爲你打算將它們分組，以便無線電buttun的第一組變得像單選按鈕給予相同的名稱這

在這裏輸入的代碼

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

中的文本框，當用戶點擊調用此方法按鈕