QA@IT

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

2450 PV

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に詳しい方がおりましたら、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。

回答

決して詳しいわけではありませんが…
jQuery であれば

$("#SaveAccount3").change(function() {
  var index = $(this).children("option:selected").index();

  $("#measureid select").each(function() {
    var sel = $(this);
    sel.val($(sel.children("option")[index]).val());
  })
})

という感じでいかがでしょう。

編集 履歴 (0)
  • ご回答ありがとうございます。
    yitoさんの回答をもとに導入を試みてみましたがうまく動かすことができませんでした…。
    サンプルページはこちら( http://lifestyledesign1.sakura.ne.jp/shirtskul/auto-test )となっておりまして、エラーの原因をお伺いすることはできますでしょうか?
    お手数をおかけいたしますが、再度ご回答いただけますと幸いです。
    -
  • ご提示いただいたページを開いて、Chrome の JavaScript コンソールにコードを貼り付けて実行すると動作するようですので、スクリプトがロードされるタイミングの問題でしょうか。件のコードを $(document).ready(function(){ ... }) の中か、もしくは body の末尾の方に記述するとどうでしょうか。 -
  • ご回答ありがとうございます。$(document).ready(function(){ ... })の中に記述した際に、正常に動かすことができました。ご丁寧に解説いただき、本当にありがとうございました!! -
ウォッチ

この質問への回答やコメントをメールでお知らせします。