selectが複数ある場合の値取得について
お世話になります
HTML内に下記のようなフォームが複数存在しています。
select[name="page_name"]が変更されたときに値を取得しPHP に送信したいのですが、一番上にあるselectの値が取得されてしまいます。
ひとつのscriptで複数のselectに対応したい場合、どのような記述になりますでしょうか？
助けていただきたいです。よろしくお願いします。
<!--１番目のセレクト-->
<form method="post" action="javascript:void(0);">
<input type="hidden" id="img_id" name="img_id" value="3">
<select name="page_name">
<option value="">選択してください</option>
<option id="page_name" value="1">あああ</option>
<option id="page_name" value="2">いいい</option>
<option id="page_name" value="3">ううう</option>
</select>
</form>
<!--２番目のセレクト-->
<form method="post" action="javascript:void(0);">
<input type="hidden" id="img_id" name="img_id" value="4">
<select name="page_name">
<option value="">選択してください</option>
<option id="page_name" value="1">あああ</option>
<option id="page_name" value="2">いいい</option>
<option id="page_name" value="3">ううう</option>
</select>
</form>
<!--３番目のセレクト-->
---省略---
/*script*/
$('select[name="page_name"]').change(function() {
var data = {
'page_name' : $('#page_name').val(),
'img_id' : $('#img_id').val()
};
$('#name').text(data['img_id']);
$.ajax({
type: "POST",
url: "/admin/change/",
data:data
});
alert("画像使用ページを変更しました！");
return false;
});
});
お礼
無理なんですか。。。 ありがとうございました。