QA@IT

jQueryのchangeがうまく動かない。

5400 PV

オプション項目を2つ作成し、その2つのオプション項目の値に依存して結果が変化するプログラムを作成しようとしております。
しかし、思うような結果が得られずに困っております。

詳細は以下のページのCSS欄にまとめてあります。
http://jsfiddle.net/qjamV/5/

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

  • まとまってないように思いますが、どうなってほしいんですか?現状の処理の内容をご自身で理解されてますか?5個のアイテムに対して3つしか分岐がありません。
    CSSに説明を書くなら、コメントにするなどしましょう。
    同じIDのオブジェクトが存在します、三項演算子の使い方も微妙です。今回の問題に関してもjQueryというよりは javascriptについての問題の様に思います。
    -
  • 更新されたようですが、URLが変わっているはずですので修正してください。 -
  • 申し訳ございません。URLはこちら( http://jsfiddle.net/qjamV/5/ )となります。どうぞよろしくお願いいたします。 -
  • 回答の方も直してくださいね。 -
  • 度々のご指摘ありがとうございます。ただいま変更いたしました。 -

回答

ボタンではなくドロップダウンリストでいいでしょうか。

とりあえず 2つ選択肢があるのに、1つでしか判断していないのが問題です。
1つ目に関しても、先に2つ目を変えてから次に 1つ目のアイテムを変更した場合もうまくいっていないんではないでしょうか。

コメントにも書きましたが、ソースを jsfiddleにあげてくれたのはありがたいですが、どうなって欲しいのかわかりません。表から読み取れというのはちょっと乱暴すぎます。せめて現状なにがおかしくて、どうなって欲しいのか 2,3 例示すべきでしょう。


以下、追記しました。

cssの説明は質問する上ではまだ不十分とは思います(現状どうなってるとかこの操作の時おかしいとかが不足)が、
やりたいことはわかりましたので回答します。

たとえば SaveAccount2の方のイベントを以下の様にします。
L,XLは元のままで直してません。
あえて説明はしません。どう動くか、なぜうまくいくか、L,XLはなぜ動かないかは考えてください。
その上でわからない部分があれば聞いてください。

$('#SaveAccount2').change(function(){
    var option = $('#SaveAccount1').val();
    var opt = option == "A" ? 0 : option == "B" ? 5: 10;
    var optionSize = $("option:selected", this).val();
    opt += optionSize == "D" ? 0 : optionSize == "E" ? 1 : 2;
    $.each($('select[class=chkselect]'),function(i){
        $('select[id=measureidsize'+i+'] option:eq('+opt+')').attr('selected', 'selected');
    });
});

もともとはSaveAccount2の方の質問だけだったので SaveAccount1の方は特に直してませんが応用で直せるとは思います。

編集 履歴 (1)
  • ご回答ありがとうございます。
    説明が不足しており申し訳ございませんでした。
    コメント欄の文字制限があるため、いくつかにわけて返答いたします。

    >>ボタンではなくドロップダウンリストでいいでしょうか。
    こちらに関しましては、ドロップダウンリストで問題ありません。

    -
  • >>とりあえず 2つ選択肢があるのに、1つでしか判断していないのが問題です。
    1つ目に関しても、先に2つ目を変えてから次に 1つ目のアイテムを変更した場合もうまくいっていないんではないでしょうか。
    おっしゃる通りです。
    その点も含めて、どう対処すればいいのかわからない状況です。。
    -
  • >>コメントにも書きましたが、ソースを jsfiddleにあげてくれたのはありがたいですが、どうなって欲しいのかわかりません。表から読み取れというのはちょっと乱暴すぎます。せめて現状なにがおかしくて、どうなって欲しいのか 2,3 例示すべきでしょう。
    大変申し訳ございませんでした。
    jsfiddleのCSSの欄に再度、問題点をまとめました。
    -
  • 以上となります。なにかアドバイス等いただけますと幸いです。どうぞよろしくお願いいたします。 -
  • ご回答ありがとうございます。(コードを理解したあとだとお礼が遅くなってしまいますので、先にお礼のコメントをさせてください…。)いただいたコードをみて、もう一度よく考えてみます。コードが完成しだいこちらで報告ができればと思います。どうぞよろしくお願いいたします。 -
  • 了解しました。ここにコメントを追記してくれれば通知が届きますので、コードで聞きたいことがでてきたときはここにコメントしてくれれば気付けると思います。 -
  • ご連絡が遅れてしまい申し訳ございません。ご教授いただいたコードを参考に完成させることができました。 -
  • 答えをもらってそのまま使うようでは全く進歩しませんよ。 -
var size = {
 'skinny':{'XS':'90','S':'96','M':'102','L':'108','XL':'114'},
 'slim':{'XS':'94','S':'102','M':'110','L':'116','XL':'122'},
 'natural':{'XS':'96','S':'104','M':'112','L':'118','XL':'124'}
}:

上記のような連想配列(オブジェクト)を作って、
それを元にして<option>を都度生成する形がシンプルかと思います。

中途半端な説明ですいません。

編集 履歴 (1)
  • http://jsfiddle.net/ymZp2/
    こんな感じでどうでしょう、
    -
  • あと、さきほどの
    `var size = { ..`
    の末尾が誤ってコロンになっています。セミコロンが正しいです。
    -
  • ご回答ありがとうございます!!
    上記コードを参考にして、無事に動かすことができました。
    -
ウォッチ

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