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:'てすと２' }。。。]の形で返すようにする。
//異なる場合はココで整形も可
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