jQuery、Ajax、PHPを使って、データを絞り込んで表示する方法を教えていただけないでしょうか？

Question

ぱんたま

32

16もっと見る

200pt

ウェブ制作

jQuery、Ajax、PHPを使って、データを絞り込んで表示する方法を教えていただけないでしょうか？

/*or検索*/
<input type="checkbox" name="country_id[]" value="1" id="CountryId1" />日本
<input type="checkbox" name="country_id[]" value="2" id="CountrdIs2" />アメリカ
<input type="checkbox" name="country_id[]" value="3" id="CountryId3" />アジア

/*and検索*/
<input type="checkbox" name="dgenre_id[]" value="1" id="GenreId1" />アクション
<input type="checkbox" name="genre_id[]" value="2" id="GenreId2" />ドラマ
<input type="checkbox" name="genre_id[]" value="3" id="GenreId3" />ホラー

/*データ表示部分*/
<section id="movieList" class="group">
<img src="/eigazuki/img/poster/1.jpeg"/>
<img src="/eigazuki/img/poster/2.jpeg"/>
を含め１００件の画像を表示しています。
</section>

作業の流れとしては、
１００件の画像の中から、チェックボックスの(国はアメリカで、ジャンルがアクションとホラーな作品)valut値に一致した画像のみを表示。

「検索ボタンを押してから画像を表示させる処理」は出来るのですが、それをボタンを押さずにリアルタイムで行いたいのです。
2.3日考え、調べたのですが全くのお手上げです。
どなたか、アドバイスは参考になるサイトを教えていただけると幸いです。

回答の条件

1人10回まで
13歳以上

登録：2012/04/22 20:03:33
終了：2012/04/25 02:28:45

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

Cherenkov 2012/04/23 00:04:59

チェックボックスのvalueによって画像を選ぶわけですよね。
どういうルールに従って画像を選ぶのでしょうか？
ぱんたま 2012/04/23 00:21:53

前回の質問はお世話になりました。今回もよろしくお願いします！
画像には国idと複数のジャンルidが付属していますので、それらに一致した画像のみを表示します。
Cherenkov 2012/04/23 00:24:46

質問文のimgタグにはidが付属してないと思うのですがそのあたりの仕様がわからないと書けません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

Cherenkov · Accepted Answer · 2012-04-23T00:21:18+09:00

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script>
    $(function() {
        $('input:checkbox').change(function() {
			$('#listBlock01 section').css('display', 'none');
			var checked = {country_id:[], genre_id:[]};
			var c = $('input:checkbox:checked');
			if (!c.length) return;
			c.each(function(){
				var name = this.name.replace('[]','');
				var value = this.value;
				var tmp = 'input:hidden[name*="' + name + '"][value="' + value + '"]';
				checked[name].push(tmp);
			});
			checked.country_id = checked.country_id.length ? ':has(' + checked.country_id.join(',') + ')' : '';
			checked.genre_id = checked.genre_id.length ? ':has(' + checked.genre_id.join('+') + ')' : '';
			var ss = 'section' + checked.country_id + checked.genre_id;
			$(ss).css('display', 'inline')
        });
    });
    </script>
    <style>
        #listBlock01 section {
            display: none;
        }
    </style>
  </head>
  <body>
    or検索
	<input type="checkbox" name="country_id[]" value="1" />日本
	<input type="checkbox" name="country_id[]" value="2" />アメリカ<br>
    and検索
	<input type="checkbox" name="genre_id[]" value="1">アクション
    <input type="checkbox" name="genre_id[]" value="2">ドラマ
    <div class="unitMovie group" id="listBlock01">
      <section class="innr group">
        <h1 class="image slideUp">
          <a href="/eigazuki/view/1" target="_blank" title="イーグル・アイ">
            <img alt="イーグル・アイ" class="capture" height="253" src="/eigazuki/img/poster/1.jpeg" width="180" />
          </a>
        </h1>
        <p class="tagline balloon04">それは全てを見ている。しかし、その姿は決して見えない。</p>
        <input type="hidden" name="data[Movie][country_id]" value="2"/>
        <input type="hidden" name="data[Movie][genre_id]" value="1"/>
	  </section>
      <section class="innr group">
        <h1 class="image slideUp">
          <a href="/eigazuki/view/2" target="_blank" title="とっとこハム次郎">
            <img alt="とっとこハム次郎" class="capture" height="253" src="/eigazuki/img/poster/2.jpeg" width="180" />
          </a>
        </h1>
        <p class="tagline balloon04">ハムハ～。</p>
        <input type="hidden" name="data[Movie][country_id]" value="1"/>
        <input type="hidden" name="data[Movie][genre_id]" value="1"/>
		<input type="hidden" name="data[Movie][genre_id]" value="2"/>
	  </section>
    </div>
  </body>
</html>

適当（逃げ道）

参考：Jqueryのfindでand検索or検索 - ［Swb:］渋谷に住むWEBデザイナの備忘録

jQuery、Ajax、PHPを使って、データを絞り込んで表示する方法を教えていただけないでしょうか？

ベストアンサー

Cherenkov15044932012/04/23 00:21:18

コメント（3件)

この質問への反応（ブックマークコメント）