セレクトボックスでの表示の切り替え

下記の参考サイトをもとにセレクトボックスを使って<label>内のデータの表示させるスプリクトをつているのですが、デフォルト時に<option>の最初の内容（ココでは<label id="label1" for="13" class="13">）を表示させたいですが、どうすればいいのかわかりません。
ちなみに、<select>と<label>の値はデータベースから値をと出しますので内容が変更されます。
どうかよろしくお願いします。

参考サイト

javascript
1$(function() {
2    //This hides all initial textboxes
3    $('label').hide();
4    $('#ons').change(function() {
5        //This saves some time by caching the jquery value
6        var val = $(this).val();
7        //this hides any boxes that the previous selection might have left open
8        $('label').hide();
9        //This just opens the ones we want based off the selection
10        $('.' + val).show();
11    });
12    //I'm not really sure why these are here
13    $("input")
14    .focus(function () {
15        $(this).next("span").fadeIn(1000);
16    })
17    .blur(function () {
18         $(this).next("span").fadeOut(1000);
19    });
20});

html
1 <form>
2  <select id="ons">
3   <option value="13">第13号 2016 autumn</option>
4   <option value="12">第12号 2016 spring</option>
5   <option value="11">第11号 2016 winter</option>
6  </select>
7 </form>
8 <label id="label1" for="13" class="13">
9  <div class="image paper"><a href="url" target="_blank"><img src="写真" width="780" alt=""/></a></div>
10  <div class="btn trans"><a href="url"><span>PDFダウンロード</span></a></div>
11 </label>
12 <label id="label2" for="12" class="12">
13  <div class="image paper"><a href="url" target="_blank"><img src="写真" width="780" alt=""/></a></div>
14  <div class="btn trans"><a href="url"><span>PDFダウンロード</span></a></div>
15 </label>
16 <label id="label3" for="11" class="11">
17  <div class="image paper"><a href="url" target="_blank"><img src="写真" width="780" alt=""/></a></div>
18  <div class="btn trans"><a href="url"><span>PDFダウンロード</span></a></div>
19 </label>

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

回答3件

ベストアンサー

$('#ons')のchangeを実行してやるだけでは？

javascript
1    $('#ons').change(function() {
2      var val = $(this).val();
3      $('label').hide();
4      $('.' + val).show();
5    }).change();
6

投稿2016/12/15 08:33

yambejp

総合スコア114784

MasanoriTakaki

2016/12/15 08:51

回答ありがとうございます。うまく最初の<label>だけ表示できるようになりました。ありがとうございます。

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

ソースのコメントにある通り$('label').hide();が初期表示時に、Labelを隠しています。
その為、この行を消してしまえばよいのではないでしょうか。

html
1<html>
2  <head>
3    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
4    <script>
5      $(function() {
6          //This hides all initial textboxes
7          //$('label').hide();
8          $('#ons').change(function() {
9              //This saves some time by caching the jquery value
10              var val = $(this).val();
11              //this hides any boxes that the previous selection might have left open
12              $('label').hide();
13              //This just opens the ones we want based off the selection
14              $('.' + val).show();
15          });
16          //I'm not really sure why these are here
17          $("input")
18          .focus(function () {
19              $(this).next("span").fadeIn(1000);
20          })
21          .blur(function () {
22              $(this).next("span").fadeOut(1000);
23          });
24      });
25    </script>
26  </head>
27  <body>
28<form>
29  <select id="ons">
30   <option value="13">第13号 2016 autumn</option>
31   <option value="12">第12号 2016 spring</option>
32   <option value="11">第11号 2016 winter</option>
33  </select>
34 </form>
35 <label id="label1" for="13" class="13">
36  <div class="image paper"><a href="url" target="_blank"><img src="写真" width="780" alt=""/></a></div>
37  <div class="btn trans"><a href="url"><span>PDFダウンロード</span></a></div>
38 </label>
39 <label id="label2" for="12" class="12">
40  <div class="image paper"><a href="url" target="_blank"><img src="写真" width="780" alt=""/></a></div>
41  <div class="btn trans"><a href="url"><span>PDFダウンロード</span></a></div>
42 </label>
43 <label id="label3" for="11" class="11">
44  <div class="image paper"><a href="url" target="_blank"><img src="写真" width="780" alt=""/></a></div>
45  <div class="btn trans"><a href="url"><span>PDFダウンロード</span></a></div>
46 </label>
47  </body>
48</html>

投稿2016/12/15 08:10

編集2016/12/15 08:25

motuo

総合スコア3027

MasanoriTakaki

2016/12/15 08:22

回答ありがとうございます。試してみましたが、すべて表示されてしまいます。

motuo

2016/12/15 08:24

だとすると、htmlの書き方に不具合があると思います。私の端末で稼働するhtmlを回答に貼るので、確認してみて下さい。

MasanoriTakaki

2016/12/15 08:48

回答ありがとうございます。試してみましたが、すべての<label>が表示されてしまいます。

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

こんにちは。

恐らく、デフォルトとしたい値を持ったoptionタグに「selected」を付与すればOKかと思われます。

  <select id="ons">
   <option value="13" selected>第13号 2016 autumn</option>
   <option value="12">第12号 2016 spring</option>
   <option value="11">第11号 2016 winter</option>
  </select>

投稿2016/12/15 08:08