JQueryを使ってプルダウンでコンテンツ内の要素表示切替
正直ネタがないのでメモ的感じで。
初回読み込み時は、すべてのエリアの情報を表示して、プルダウンでエリアを選んだ場合は選んだエリア以外を非表示にしたいとき。
htmlはこんな感じ。別に何も変わらないけどhtml5。
<section id="list"> <article> <select id="area_select"> <option value="all" selected>エリアを選択</option> <option value="area_tokyo">東京</option> <option value="area_hokkaido">北海道</option> <option value="area_tohoku">東北</option> <option value="area_niigata">新潟</option> <option value="area_hokuriku">北陸</option> <option value="area_nagoya">名古屋</option> <option value="area_osaka">大阪</option> <option value="area_hiroshima">広島</option> <option value="area_shikoku">四国</option> <option value="area_kyushu">九州</option> </select> <div class="area_nagoya"> <h3> 名古屋 <img src="images/common/label_rikei.png" width="50" height="18" alt="理系"> <img src="update.gif" class="updateimg" alt="UPDATE"></h3> <dl> <dt>12月3日(土)・4日(日)</dt> <dd>0:00~17:30</dd> </dl> </div> <!-- / .area_nagoya --> <div class="area_osaka"> <h3> <input type="hidden" value="20121125"> 大阪 <img src="images/common/label_gyoukai.png" height="18" height="18" alt="業界研究"> <img src="update.gif" class="updateimg" alt="UPDATE"></h3> <dl> <dt>12月3日(土)・4日(日)</dt> <dd>0:00~17:30</dd> </dl> </div> <!-- / .area_osaka --> <div class="area_tokyo"> <h3> <input type="hidden" value="20111125"> 東京 <img src="images/common/label_u.png" width="68" height="18" alt="Uターン"> <img src="update.gif" class="updateimg" alt="UPDATE"></h3> <dl> <dt>12月3日(土)・4日(日)</dt> <dd>0:00~17:30</dd> </dl> </div> <!-- / .area_tokyo --> <div class="area_tokyo"> <h3> <input type="hidden" value="20111125"> 東京 <img src="update.gif" class="updateimg" alt="UPDATE"></h3> <dl> <dt>12月3日(土)・4日(日)</dt> <dd>0:00~17:30</dd> </dl> </div> <!-- / .area_tokyo --> </article> </section> <!-- / #list -->
javascriptはこちら
//初回読み込み時のゼブラ対応 $(function(){ // ゼブラ $('#list div').removeClass('odd'); $('#list div').removeClass('even'); $('#list div:odd').addClass('odd'); $('#list div:even').addClass('even'); }); //初回読み込み時のゼブラ対応 $(function(){ $('#area_select').change(function(){ // プルダウンの値を取得して表示するdivを決める var area = 'div.' + $('#area_select').val(); // デフォルトの「エリアを選択」が選択し直されたら全て表示 if (area == 'div.all') { //再ゼブラ $('#list div').removeClass('odd'); $('#list div').removeClass('even'); $('#list div:odd').addClass('odd'); $('#list div:even').addClass('even'); $('#list div').show(); } // それ以外の場合 else { $('#list div').hide(); $(area).show(); //再ゼブラ $(area+":odd").addClass('odd'); $(area+":even").addClass('even'); } }); });
ゼブラの処理をその都度してあげないと全選択の時にちょっとおかしくなるのね。