Selectの値が変化したら、Ajaxで値をPOST。

要するにこんなSelectがあって並び替えをしたいわけですが、「セレクト→実行ボタン」とゆー、２段階のアクションではなくselectの値が変わったら、その値をAjaxでPHPにPOSTして、ソートしなおしたい…というわけです、はい。
▼▼



風俗系のポータルサイトの殆どは、細かな条件を指定して「検索」とやるのですが、あれって結構使いづらいなと個人的には思っているので、ドキポケネットではSelectでソート内容を決めるだけという方法を取りました。

大抵のサイトは、ラジオボタンやチェックボックスで項目を選択して検索するという方法だと思いますが、そもそもあれってそこまで細かく選択してもらう必要あるのかな…(ry

もっとシンプルに
「年齢順にソート」
「バスト（カップ）サイズでソート」
とかやったほうが、わかりやすいんではないかと。

で、「選択」→「検索ボタン押下」という２段階の操作すらいらねーっす、ということで、selectメニューから一つ選択したら新たにソートし直すやつ、やります。
結構前にやった「PHPとAjaxを使って「もっと読む」ボタンをjQuery-Mobileページに簡単に実装。」って記事の応用です。

HTML側

<form method="post" action="#" id="form">
<select name="category" id="catgeory" data-mini="true" class="cng">
<option value="1">人気ランキング順</option>
<option value="2">新着順</option>
<option value="3">バストカップの大きい順</option>
<option value="4">背の小さい順</option>
<option value="5">年齢の若い順</option>
</select>
</form>

<div class="ui-grid-b thumbs" id="items"></div>
<a href="#" onclick="categoryLoad();" data-role="button" id="loading">もっと見る</a>

<script>
var start = 0;
var num = Math.floor( Math.random() * 100 );
var cate = $("select.cng option:selected").val();

    function categoryLoad() {
        $("a#loading").html("<img src='/sp/images/loadingnow.gif'>");    
        $.post('items.php', { start : start, num : num,category : cate},
        function(res){
            $("a#loading").html("もっと見る");
            $("#items").append(res);
        });
        start += 15;
    }//categoryLoad

    $("select.cng").change(function () {	  
	      $("#items").children().remove();
              cate = $("select.cng option:selected").val();
	      start = 0;
              num = Math.floor( Math.random() * 100 );

	      categoryLoad();
	  
    }).change();

</script>

要するに「$("select.cng").change(function () {～})」でselectの変更があったときに「categoryLoad()」とゆーfunctionを呼び出しているだけです。
selectの選択されたoptionの「value」の値は
「$("select.cng option:selected").val();」
ってとこで取得してます。

ただそれだけです。
jQuery使うと簡単ですよね。

むしろ、ここを見たほうが分かりやすかったり。
▼▼
jQuery日本語リファレンス

ま、続きは個人ブログの方で。
http://webmage.pro/blog/archives/553