jQueryのプラグインでselect2というものがあります。
https://select2.github.io/
selectボックスのパワーアップ的なやつです。
これ自体についての説明は、他にいくらでもあるのでここでは省きます。
先日これの古いバージョンの利用でハマったので、そのメモを残します。
*新しいバージョンには差替えられできない+色々とjsで作りこまれている状況
バージョン:3.4.5
入力情報によって、選択肢を動的に取得してセットする使い方をしたい。
公式サイトにて「Loading remote data」として利用方法の記載があるものです。
が、何やら初期表示のところで環境の影響もあってか、うまく動かず困りました。原因については追求していません。単品でテストページを作ったら、このバージョンでもマニュアル通り動くし。。。^^;
//単純な使い方はこれ。既存のselectタグに対し追加 $('#selectTest').select2(); //入力情報によって、選択肢を動的に取得する setSelect2('userList',''); setSelect2('userList','99'); function setSelect2(_targetID,_setVal){ //初期表示指定値があれば値をセット var setVal = ''; if(_setVal){ setVal = _setVal; $('#'+_targetID).val(_setVal); } //複数選択は仮にfalse。変更可 var multipleFlg = false; var sendUrl = "/t_select2/send.php"; //select2()のオプションの用意 var optionArray = { allowClear: true, minimumInputLength: 1,//1文字入力されたら検索 multiple : multipleFlg,//複数選択可否 cache:true, ajax: {//通常:入力文字列をもとに選択肢取得 url: sendUrl, dataType: 'json', data: function (_term) {//PHP側で取得に必要な引数をセット return { inputData: _term, //入力情報 setVal:'' }; }, results: function (_data) { //_dataは、 //[{ id:'1', text:'てすと' }, // { id:'2', text:'てすと2' }。。。]の形で返すようにする。 //異なる場合はココで整形も可 return { results:_data }; }, cache:true } }; //オプションの追加 //--プレースホルダーのセット //--*trueの場合プレースホルダーは利用できない(?) if(multipleFlg===false){ optionArray.placeholder = 'プレースホルダー'; } //--初期表示の値の指定があればその値のみ取得しセット if(setVal!==""){ //初期表示設定:単にデフォルト表示ならココで単純に指定も可 //今回は再表示時、cookie値を表示したかったのでajaxで取得 optionArray.initSelection = function (ele,callback) { $.ajax({ url: sendUrl, dataType: 'json', data: { inputData: '', setVal:setVal//初期表示の値 }, success: function (data) { if(multipleFlg===true){//multipleの場合 callback(data); }else{ callback(data[0]); } } }); /* 本来上のやり方でいいんだけど。。。 * 某案件環境の場合callbackが働かなくなっていた。 * 苦肉の策として以下のように、 * 同期通信にし、値を戻すことで動いたのでメモ var getInitSelect = $.ajax({ //type:'post', url: sendUrl, dataType: 'json', async: false,//同期通信 data: { inputData: '', //入力情報 //getType:_targetID, //取得項目情報 setVal:setVal } }).responseText; var getInitSelectObj=$.parseJSON(getInitSelect); if(multipleFlg===true){//multipleの場合 return getInitSelectObj; }else{ return getInitSelectObj[0]; } */ }; } $("#"+_targetID).select2(optionArray); }; //end setSelect2
実行サンプル:*上のコードの実際の動作はこちら↓で確認できます。
http://hana-weblab.com/t_sample/t_select2/
参考にさせていただいたサイト:
https://select2.github.io/examples.html
https://select2.github.io/options.html#dataAdapter
http://k2work1.blogspot.jp/2014/05/jqueryselect2json.html
https://github.com/select2/select2/issues/2086
http://stackoverflow.com/questions/18904132/select2-and-initselection-callback