jquery formの値を取得して、画像を切り替えたい。

###前提・実現したいこと
js初心者です。
大変恐縮なのですが、至急教えていただきたいです。

formで、ラジオボタン・セレクトボックス1・セレクトボックス2で、選択の組み合わせの合計が9パターンあります。
上記、いずれかのパターンが選択され、値を取得して、ボタンをクリックしたら、
画像とテーブルが１パターンづつ表示されるようにしたいです。
デフォルトは一番上の黄色の700ピクセル画像、りんごのテーブルを表示しといて、それ以外はhiddenで隠し、取得した値によって表示切替をしたいです。

###発生している問題・エラーメッセージ
formの複数の値の取得がよくわからないです。

###ソースコード

HTML
1<!doctype html>
2<head>
3<meta charset="shift_jis">
4<style>
5    .nodisp{ display: none; }
6</style>
7<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
8<script src="jquery.focused.min.js"></script>
9
10</head>
11
12<body>
13
14<div class="c-jack" id="pagetop">
15  <div class="l-wrap-top l-color-12" id="insurance">
16    <div class="u-mTop15">
17      <div class="msArrow">
18        <div class="marketSearch">
19          <h2>
20            <span class="caption">
21              <span id="ttlTxt1">夜の献立</span><br>
22              <span id="ttlTxt2">昼の献立</span>
23            </span>
24          </h2>
25          <div class="msBody">
26            <div class="innerBox">
27              <form name="###" id="formSelect">
28                <div class="msTable">
29                  <div class="step1Box">
30                    <label for="radio1" class="mBtm10"><input type="radio" name="radio" value="1" checked="checked" id="onTrigger">野菜</label>
31                    <label for="radio2"><input type="radio" name="radio" value="0" id="offTrigger">魚</label>
32                  </div>
33
34                  <div>
35                      <select id="select">
36                      </select>
37                  </div>
38
39                  <div class="step2Box">
40                    <select name="focus" class="msSearchKouzou nodisp" id="select_hidden">
41                      <option value="0" selected>きゅうり</option>
42                      <option value="1">にんじん</option>
43                      <option value="2">まぐろ</option>
44                    </select>
45                  </div>
46
47                  <div class="step3Box">
48                    <div class="step3inner demo">
49                      <div class="stepSel">
50                        <select name="focus" class="msSearchHosyou" onchange="###">
51                          <option value="0" selected>やさい炒め</option>
52                          <option value="1">サラダ</option>
53                          <option value="2">スープ</option>
54                        </select>
55                      </div>
56
57                      <div class="hosyouIcon ">
58                        <p>3種類の画像だよ</p>
59                        <span class="iconBox" id="icon1" data-focus="0"><img src="http://dummyimage.com/295x35/000/fff" width="295" height="35" alt="hoge"></span>
60                        <span class="iconBox" id="icon2" data-focus="1"><img src="http://dummyimage.com/295x35/ff0/fff" width="295" height="35" alt="hoge"></span>
61                        <span class="iconBox" id="icon3" data-focus="2"><img src="http://dummyimage.com/295x35/f0ｓ0/fff" width="295" height="35" alt="hoge"></span>
62                      </div>
63                    </div>
64                  </div>
65
66                  <div class="step4Box">
67                    <button class="hikakuBtn imgover" name="hikaku" value="meyasuHikaku" onclick="###">クリック</button>
68                  </div>
69              </div>
70            </form>
71
72            <ul class="msCaption">
73              <li id="text">111</li>
74              <li id="text2">333</li>
75            </ul>
76          </div>
77        </div>
78      </div><!-- /marketSearch -->
79    </div><!-- /msArrow -->
80
81    <!-- graph dummy-->
82    <div id="chartBox1">
83      <img src="http://dummyimage.com/700x300/ff0/fff" alt="" />
84    </div>
85
86    <div id="chartBox1">
87      <img src="http://dummyimage.com/700x300/f00/fff" alt="" />
88    </div>
89
90    <div id="chartBox1">
91      <img src="http://dummyimage.com/700x300/ddd/fff" alt="" />
92    </div>
93
94    <div id="chartBox1">
95      <img src="http://dummyimage.com/700x300/000/fff" alt="" />
96    </div>
97
98    <div id="chartBox1">
99      <img src="http://dummyimage.com/700x300/444/fff" alt="" />
100    </div>
101
102    <div id="chartBox1">
103      <img src="http://dummyimage.com/700x300/red/fff" alt="" />
104    </div>
105
106    <div id="chartBox1">
107      <img src="http://dummyimage.com/700x300/ter/fff" alt="" />
108    </div>
109
110    <div id="chartBox1">
111      <img src="http://dummyimage.com/700x300/tre/fff" alt="" />
112    </div>
113
114    <div id="chartBox1">
115      <img src="http://dummyimage.com/700x300/ff8400/fff" alt="" />
116    </div>
117    <!-- /graph dummy-->
118
119    <!-- table -->
120    <table class="marketTableHead" id="Ht1">
121      <tr>
122        <th>りんご</th>
123        <td>りんご</td>
124      </tr>
125    </table>
126
127    <table class="marketTableHead" id="Ht2">
128      <tr>
129        <th>みかん</th>
130        <td>みかん</td>
131      </tr>
132    </table>
133
134    <table class="marketTableHead" id="Ht3">
135      <tr>
136        <th>ばなな</th>
137        <td>ばなな</td>
138      </tr>
139    </table>
140
141    <table class="marketTableHead" id="Ht4">
142      <tr>
143        <th>ぶどう</th>
144        <td>ぶどう</td>
145      </tr>
146    </table>
147
148    <table class="marketTableHead" id="Ht5">
149      <tr>
150        <th>きゅうい</th>
151        <td>きゅうい</td>
152      </tr>
153    </table>
154
155    <table class="marketTableHead" id="Ht6">
156      <tr>
157        <th>かき</th>
158        <td>かき</td>
159      </tr>
160    </table>
161
162    <table class="marketTableHead" id="Ht7">
163      <tr>
164        <th>すいか</th>
165        <td>すいか</td>
166      </tr>
167    </table>
168
169    <table class="marketTableHead" id="Ht8">
170      <tr>
171        <th>れもん</th>
172        <td>れもん</td>
173      </tr>
174    </table>
175
176    <table class="marketTableHead" id="Ht9">
177      <tr>
178        <th>もも</th>
179        <td>もも</td>
180      </tr>
181    </table>
182    <!-- /table -->
183
184</div><!-- /l-c -->
185</div><!-- /l-wrap-top -->
186</div><!-- /c-jack -->
187
188<script>
189        $(function() {
190    changeSelect();
191
192    $("input[name=radio]").on('change', function() {
193        changeSelect();
194    });
195});
196
197function changeSelect() {
198    $("#select").empty();
199    $("#select").append($("#select_hidden option").clone());
200
201    if ($("input[name=radio]:checked").val() == 1) {
202        $("#select").val(1);
203        $("#select option[value=0]").remove();
204        $("#select").removeAttr("disabled");
205    } else if ($("input[name=radio]:checked").val() == 0) {
206        $("#select").attr("disabled", "disabled");
207        $("#select").val(0);
208    }
209}
210$(function() {
211  var text01 = "111";
212  var text02 = "222";
213  var text03 = "333";
214  var text04 = "444";
215
216  $("#onTrigger").change(function () {
217      $("#text").text(text01);
218      $("#text2").text(text03);
219  });
220  $("#offTrigger").change(function () {
221    $("#text").text(text02);
222    $("#text2").text(text04);
223  });});
224    $(function domReady() {
225  $('.demo').focused();
226});
227// var val = $('#formSelect [name=radio]:checked').val();
228// alert(val);
229</script>
230
231</body>
232</html>
233

稚拙な文章とコードで申し訳ありませんが、どうかよろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

html
1<meta charset="utf-8" />
2<script src="jquery.js"></script>
3<style>
4.h { border-radius: 4px; border:solid 1px gray; box-shadow: 10 10 rgba(0,0,0,0.4); margin-bottom: 0.5em; padding: 0.2em; }
5</style>
6<div class="outer">
7<div class="h">
8<label for="R1_1"><input type="radio" name="R1" id="R1_1" value="0" checked>野菜</label>
9<label for="R1_2"><input type="radio" name="R1" id="R1_2" value="1">魚</label>
10</div>
11<div class="h">
12<select name="S1">
13  <option value="0">きゅーり</option>
14  <option value="1">にんじん</option>
15  <option value="2">まぐろ</option>
16</select>
17</div>
18<div class="h">
19  <select name="S2">
20    <option value="0">やさいいため</option>
21    <option value="1">さらだ</option>
22    <option value="2">しる</option>
23  </select>
24</div>
25</div>
26<script>
27var selectPatterns = {
28  "0,0,0": {
29    href: "href0,0,0",
30    width: 700,
31    height: 700,
32    alt: "alt message"
33  },
34  "0,0,1": {
35    href: "href0,0,1",
36    width: 700,
37    height: 700,
38    alt: "alt message"
39  },
40  "0,0,2": {
41    href: "href0,0,2",
42    width: 700,
43    height: 700,
44    alt: "alt message"
45  },
46  "0,1,0": {
47    href: "href0,1,0",
48    width: 700,
49    height: 700,
50    alt: "alt message"
51  },
52  "0,1,1": {
53    href: "href0,1,1",
54    width: 700,
55    height: 700,
56    alt: "alt message"
57  },
58  "0,1,2": {
59    href: "href0,1,2",
60    width: 700,
61    height: 700,
62    alt: "alt message"
63  },
64  "0,2,0": {
65    href: "href0,2,0",
66    width: 700,
67    height: 700,
68    alt: "alt message"
69  },
70  "0,2,1": {
71    href: "href0,2,1",
72    width: 700,
73    height: 700,
74    alt: "alt message"
75  },
76  "0,2,2": {
77    href: "href0,2,2",
78    width: 700,
79    height: 700,
80    alt: "alt message"
81  },
82  "1,0,0": {
83    href: "href1,0,0",
84    width: 700,
85    height: 700,
86    alt: "alt message"
87  },
88  "1,0,1": {
89    href: "href1,0,1",
90    width: 700,
91    height: 700,
92    alt: "alt message"
93  },
94  "1,0,2": {
95    href: "href1,0,2",
96    width: 700,
97    height: 700,
98    alt: "alt message"
99  },
100  "1,1,0": {
101    href: "href1,1,0",
102    width: 700,
103    height: 700,
104    alt: "alt message"
105  },
106  "1,1,1": {
107    href: "href1,1,1",
108    width: 700,
109    height: 700,
110    alt: "alt message"
111  },
112  "1,1,2": {
113    href: "href1,1,2",
114    width: 700,
115    height: 700,
116    alt: "alt message"
117  },
118  "1,2,0": {
119    href: "href1,2,0",
120    width: 700,
121    height: 700,
122    alt: "alt message"
123  },
124  "1,2,1": {
125    href: "href1,2,1",
126    width: 700,
127    height: 700,
128    alt: "alt message"
129  },
130  "1,2,2": {
131    href: "href1,2,2",
132    width: 700,
133    height: 700,
134    alt: "alt message"
135  }
136
137};
138function showTable() {
139  var index = [], label = [];
140  var R1 = $("input[name=R1]:checked");
141  var S1 = $("select[name=S1]");
142  var S2 = $("select[name=S2]");
143
144  index.push(R1.val());
145  index.push(S1.val());
146  index.push(S2.val());
147
148  label.push(R1.parent().text());
149  label.push(S1[0].options[S1[0].selectedIndex].text);
150  label.push(S2[0].options[S2[0].selectedIndex].text);
151
152  console.log(index.join(",") + "=>" + JSON.stringify(selectPatterns[index.join(",")]));
153  console.log(label.join(","));
154}
155$(function() {
156  showTable();
157  $("div.outer").on("change","input[name=R1],select", function(e) {
158    console.log("CHANGE !!");
159    showTable();
160  });
161
162
163});
164</script>

まるっきり変わっちゃってるけど、href0,0,0 ところに、本物の画像のURL を。
label.join(",") で選択した項目名をかんま区切りで取得。
selectPatterns[index.join(",")] で１８通りの組み合わせパターンの画像の設定を取得できます。

画像は、
$("<a />").attr(selectPatterns[index.join(",")]);
で完成です。
あとは適当に工夫してください。

投稿2016/01/07 17:16

ipadcaron

総合スコア1693

w3cdp

2016/01/10 04:56

ipadcaronさんお返事が遅くなり申し訳ありませんでした。こちら、ご参考にさせていたdき、大変助かりました。お礼申し上げます。無事に、作ることができましたので、ご報告させていただきます。ありがとうございました！

行動規範の内容に同意します

ラジオボタンの値を取得したいということでしょうか？
それでしたら下記で取得可能です。

javascript
1// きゅうり、にんじん、まぐろの中から選択されているものを取得する
2var kouzou = $('. msSearchKouzou').val();
3// => 0 or 1 or 2
4
5// 野菜炒め、サラダ、スープの中から選択されているものを取得する
6var hosyou = $('.msSearchHosyou').val();
7// => 0 or 1 or 2
8