jQueryとマルチプルセレクトの値
某 endless 氏より「マルチプルセレクトの値って jQuery でどうやって取るの？」な質問が飛んで来たよ。
プラグインとかにありそうだけど、今回は勉強ついでに自分で書いてみる事に。さらに勉強ついでにプラグインにしてみる。
HTMLはとりあえずこんな感じ。
<form id="target_form" method="post">
<select name="hoge" multiple="multiple">
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<select name="hige" multiple="multiple">
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<input type="submit" value="send" />
</form>
とりあえずこのフォームの submit をフックしてやる。
$(function ()
{
$('#target_form').submit(function ()
{
var v = $('select', this).serialize();
alert(v);
return false;
});
});
最後に return false してるのはいちいちサブミットされるとめんどくさかっただけで、それ以上の意味はとりあえず無い。で、ここでセレクトボックスを複数選択した状態でサブミットしてみると、一番最初に見つかった値しかシリアライズされない。これじゃマルチプルセレクトがの意味が全く無くなってる訳で。
で、作ってみたのがコチラ。若干手抜きが見え隠れするのはご愛嬌。
(function ($)
{
$.fn.extend({
/**
* selectのみをシリアライズ。
*/
selectSerialize : function ()
{
var _$ = $(this).children('option:selected');
return $.map(_$, function (e)
{
return e.parentNode.name + '=' + e.value||'';
}).join('&');
}// END: selectSerialize
});// END: extend
})(jQuery);
コレを使ってみるとこうなる。
$(function ()
{
$('#target_form').submit(function ()
{
var v = $('select', this).selectSerialize();
alert(v);
return false;
});
});
選択されたモノ全部がちゃんとシリアライズされてるハズ。 Django の ManyToMany なフィールドを Ajax で投げる時とか、結構使えそうかも？
- Posted at:
- 2007/07/19 00:46:18
- 4 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- Trackback:
- http://humming.via-kitchen.com/2007/07/19/jquery-and-multiple-select-value/trackback/
TrackBacks
まだ登録されていません。
Comments
ENDLESS
ちゃんらーん．
申し訳!! あざーす．$.fn.extend()は便利そうですねっ!!JavaScript苦手ですがーそっちで挑戦してみようと思います．
kishi-r
これって単純に
<input type='submit'>を
<unput type='button' name='multi_bt'>にして
$("input[@name=multi_bt]").click(function (){
alert($('select').serialize());
});
ではﾀﾞﾒ？
nobu
ダメですw
ってのはウソで、問題はそこでは無くて、
「マルチプルなセレクトボックスから、選択されたモノの値を全部引っこ抜く！」
って事な訳です。
あと、サブミット処理の所にtype=buttonなinputを使うのは個人的には好きくないのです。
アドバイス頂いたのにすいません。
kishi-r
あ〜。
ほんとだ。
実際に試したら、確かに取れないですね。
試さずよけいな事を言って、
申し訳ないッス。。。