2013年06月19日

セレクトボックスの値を変えたらリンクのクエリ文字列を変える

結構需要あると思うんですが、探し方が悪いのか見つけられなかったので備忘録的に。
セレクトボックスで選択しているアイテムを変えると、それに応じてlist内にあるリンクのクエリを変更するというもの。
HTMLはこんな感じ

画像サイズ:
<ul>
<li><a href="hoge.php?id=xxxxxx&s=1&p=1"><img src="./img/hoge.jpg" alt=""></a></li>
<li><a href="hoge.php?id=xxxxxx&s=2&p=1"><img src="./img/hoge2.jpg" alt=""></a></li>
<li><a href="hoge.php?id=xxxxxx&s=3&p=1"><img src="./img/hoge3.jpg" alt=""></a></li>
</ul>
<form>
<select name="size" id="size">
<option value="1" selected>サイズ1</option>
<option value="2">サイズ2</option>
<option value="3">サイズ3</option>
<option value="4">サイズ4</option>
<option value="5">サイズ5</option>
<option value="6">サイズ6</option>
</select>
画像の向き:
<select name="pic" id="pic">
<option value="1" selected>画像1</option>
<option value="2">画像2</option>
<option value="3">画像3</option>
<option value="4">画像4</option>
</select>
</form>

セレクトボックスが選ばれた時、それに応じてリスト内のリンクのクエリ(上記場合はsとp)を変えるというものです。
Javascriptだけでできそうですが、他にjQueryを使うためjQueryを読み込んでいたのでjQueryでやりました。
JS部分はこんな感じ

<script>
$(function(){
$('select').change(function() {
var p="&p=" + document.mainForm.pic.selectedIndex;
var s="&s=" + document.mainForm.size.selectedIndex;

$('ul li a').each ( function() {
var url=$(this).attr('href');
var buff=url.split("?");
var buff2=buff[1].split("&");
$(this).attr("href", buff[0] + "?" + buff2[0] + s + p);
});
});
});
</script>

あんまり難しくないと思うので、解説も不要かと思いますが念のため
$('select').change(function() {・・・selectボックスがchangeした時のイベントを指定しています。
var p="&p=" + document.mainForm.size.selectedIndex;・・・pという変数にセレクトボックスで選ばれた値を格納(sも同様)
$('ul li a').each ( function() {・・・リストが複数あるので繰り返し同じ処理をさせます。
var url=$(this).attr('href');・・・一度現状のhrefの値をurlという変数に格納
var buff=url.split("?");・・・格納したhrefを"?"で区切ってbuffという配列に格納します。URI部分とクエリ部分に分けます。
var buff2=buff[1].split("&");・・・クエリ部分をさらに各クエリに分けています。(idはそのまま使うため)
$(this).attr("href", buff[0] + "?" + buff2[0] + p + t);・・・hrefの値を構成しなおして書き直し。

ホントは各クエリの値について変数名があってるのかどうかとかチェックを入れたほうがいいかと思いますが、まぁ動作するので・・・適当でスイマセン。
posted by BigMoonEz at 11:02 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする