QA@IT
«質問へ戻る

質問を投稿

『オプション項目』の変更時に『別のオプション項目』を自動変更する方法

1つのページに7つのオプション項目を設置しております。
先頭に設置したオプション項目を変更した際に、
あらかじめ設定していた数値がその他のオプション項目欄に自動入力されるように設定したいです。

(コードのイメージ図)
■オプション① A, B, C
□オプション② (A:10, B:20, C:30)
□オプション③ (A:15, B:25, C:35)
...
□オプション⑦ (A:18, B:28, C:38)

(実行例)
オプション①でAを選択した場合
オプション②に10が挿入される
オプション③に15が挿入される
...
オプション⑦に18が挿入される

(実際のコード)

A, B, Cの選択
<select name="preset" id="SaveAccount3" type="submit" value="オプション①" />
                 <option value="A" >A</option>
                 <option value="B">B</option>
                 <option value="C">C</option>
</select>

<ul id="measureid">
            <li><label for="CreditcardMonth">オプション②</label>
            <select id="measureidsize1" name="measure1" class="chkselect">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
            </select></li>

            <li><label for="CreditcardMonth">オプション③</label>
            <select id="measureidsize1" name="measure1" class="chkselect">
                <option value="15">15</option>
                <option value="25">25</option>
                <option value="35">35</option>
            </select></li>

<!-- 一部省略 -->

            <li><label for="CreditcardMonth">オプション⑦</label>
            <select id="measureidsize1" name="measure1" class="chkselect">
                <option value="18">18</option>
                <option value="28">28</option>
                <option value="38">38</option>
            </select></li>

いろいろと検索をしてみましたが、
オプション項目を自動変更するというサンプルを見つけることができませんでした。

Javascriptに詳しい方がおりましたら、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。

1つのページに7つのオプション項目を設置しております。
先頭に設置したオプション項目を変更した際に、
あらかじめ設定していた数値がその他のオプション項目欄に自動入力されるように設定したいです。

(コードのイメージ図)
■オプション① A, B, C
□オプション② (A:10, B:20, C:30)
□オプション③ (A:15, B:25, C:35)
...
□オプション⑦ (A:18, B:28, C:38)

(実行例)
オプション①でAを選択した場合
オプション②に10が挿入される
オプション③に15が挿入される
...
オプション⑦に18が挿入される

(実際のコード)
```
A, B, Cの選択
<select name="preset" id="SaveAccount3" type="submit" value="オプション①" />
                 <option value="A" >A</option>
                 <option value="B">B</option>
                 <option value="C">C</option>
</select>

<ul id="measureid">
            <li><label for="CreditcardMonth">オプション②</label>
            <select id="measureidsize1" name="measure1" class="chkselect">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
            </select></li>

            <li><label for="CreditcardMonth">オプション③</label>
            <select id="measureidsize1" name="measure1" class="chkselect">
                <option value="15">15</option>
                <option value="25">25</option>
                <option value="35">35</option>
            </select></li>
        
<!-- 一部省略 -->

            <li><label for="CreditcardMonth">オプション⑦</label>
            <select id="measureidsize1" name="measure1" class="chkselect">
                <option value="18">18</option>
                <option value="28">28</option>
                <option value="38">38</option>
            </select></li>
```

いろいろと検索をしてみましたが、
オプション項目を自動変更するというサンプルを見つけることができませんでした。

Javascriptに詳しい方がおりましたら、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。