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"/>
を含め100件の画像を表示しています。
</section>


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

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

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2012/04/22 20:03:33
  • 終了:2012/04/25 02:28:45

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/04/23 00:21:18

ポイント200pt
<!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デザイナの備忘録

他14件のコメントを見る
id:Cherenkov

条件に一致したsection要素を表示/非表示にしてるのでそのへんを確認・変更してみては

2012/04/23 10:34:34
id:kyouryukun

いただいたコードを基にあとは、こちらで試行錯誤していきます。
ほんとうに参考になりました!

2012/04/23 11:33:51
  • id:Cherenkov
    チェックボックスのvalueによって画像を選ぶわけですよね。
    どういうルールに従って画像を選ぶのでしょうか?
  • id:kyouryukun
    前回の質問はお世話になりました。今回もよろしくお願いします!
    画像には国idと複数のジャンルidが付属していますので、それらに一致した画像のみを表示します。
  • id:Cherenkov
    質問文のimgタグにはidが付属してないと思うのですがそのあたりの仕様がわからないと書けません

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません