0

ユーザーが場所に応じて固定料金でパレットを出荷できるフォームがあります。現在、これは英国とフランス向けです。国ごとに、それらは 4 つのゾーンに分けられます。

したがって、次のようなテーブルがあります。

ここに画像の説明を入力

これを行う最善の方法は、何らかの形で次のような 2 次元配列を作成することだと考えていました。

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>

私が抱えている問題は、これをユーザーに出力する方法ですか? 2次元配列の使用は正しいですか? それとも、私は完全に間違った方向に進んでいますか？

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

これが 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、それ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

この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]
 }

body タグ内にテキスト ボックスを含める

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

ユーザーがボタンをクリックしたときにこのメソッドを呼び出します

于 2013-12-12T15:42:28.043 に答える