HTML の selectタグを１０００個以上も書いて、堂々としている人がいます。
困ったものです。
ページの初期表示は、input タグでクリックすると select タグに切り替わる方法を jQuery で書いてみた。
勿論、フォーカスを外したら元の input タグに戻るようにします。
関数定義は、以下のとおり。
$(function(){
InputSelect = {};
/**
* InputSelect.set
* @param inputid <input> の id属性値
* @param optionvalue jsonary → <option> 変換の為の<option>の value とする key
* @param optiontext jsonary → <option> 変換の為の<option>の text とする key
* @param jsonary <option>を作成する為の JSON形式ハッシュ配列
* @param selectOption <select> に付与するオプション、ハッシュで指定、何もない場合、{ } 空を指定
* @param hiddenObj HiddenフィールドObject（省略可）focus が外れている
* input 表示時でform送信された場合の select 値 として送信する。
* 受信するサーバ側はこのhiddenObjの値を処理対象にすることを想定している。
*/
InputSelect.set = function(inputid, optionvalue, optiontext, jsonary, selectOption, hiddenObj){
var inputAttr = ' id="' + inputid +'" name="' + $('#'+inputid).attr("name") + '"';
if ($('#'+inputid).attr("style")!=undefined){
inputAttr += (' style="' + $('#'+inputid).attr("style") + '"');
}
if ($('#'+inputid).attr("class")!=undefined){
inputAttr += (' class="' + $('#'+inputid).attr("class") + '"');
}
var selectElement = '<select name="' + $('#'+inputid).attr("name") + '"';
if (typeof selectOption=="object" && _isHash(selectOption)){
$.each(selectOption, function(a, v){
selectElement = selectElement + ' ' + a + '="' + v + '"';
});
}
selectElement += '></select>';
$('#'+inputid).click(function(){
var cText = $(this).val();
$(this).before(selectElement);
var select = $(this).prev();
for(var i in jsonary){
if (cText===jsonary[i][optiontext]){
select.append('<option value="' + jsonary[i][optionvalue] + '" selected>' + jsonary[i][optiontext] + '</option>');
}else{
select.append('<option value="' + jsonary[i][optionvalue] + '">' + jsonary[i][optiontext] + '</option>');
}
}
if (hiddenObj != undefined){
select.change(function(o){
hiddenObj.val($("option:selected").val());
});
}
select.focus().blur(function(){
select.before('<input' + inputAttr + '" value="' + $(this).children(" option:selected").text() + '">');
if (hiddenObj != undefined){
hiddenObj.val($(this).children("option:selected").val());
}
$(this).remove();
InputSelect.set(inputid, optionvalue, optiontext, jsonary, selectOption, hiddenObj);
});
$(this).remove();
});
};
function _isHash(obj){
if (typeof obj=="object"){
for(k in obj){
if(obj[k] != undefined){
return true;
}else{
return false;
}
}
}
return false;
}
});
使い方サンプルは、、
以下のように、select の option タグに書くものを JSON の配列で用意します。
selectdata = [
{ "code": "" , "text": "" },
{ "code": "S012", "text": "レモン" },
{ "code": "K107", "text": "青ネギ" },
{ "code": "K085", "text": "とろろ芋" },
{ "code": "K021", "text": "キャベツ" },
{ "code": "K096", "text": "セロリ" },
];
input タグが、HTML-BODY 上に次のように書かれています。
<div>
<input type="text" id="item" name="itemName" style="background-color: #f0f0ff;" class="inline" value="">
<input type="hidden" id="vcode" value="">
</div>
この input タグの id属性、hiddenオブジェクトを以下のように、
jQuery で設定します。
$(function(){
InputSelect.set("item",
"code",
"text",
selectdata,
{ 'style': 'background-color: #ffcccc;',
'class': 'pull_list'
},
$('#vcode')
);
});
input をクリックしてプルダウンに表示が入れ替わり、「とろろ芋」を選択すると
以下のようになっている。
<div>
<select name="itemName" style="background-color: #ffcccc;" class="inline">
<option value=""></option>
<option value="S012">レモン</option>
<option value="K107">青ネギ</option>
<option value="K085" selected>とろろ芋</option>
<option value="K021">キャベツ</option>
<option value="K096">セロリ</option>
</select>
<input type="hidden" id="vcode" value="K085">
</div>
フォーカス外せば、以下のようになる。
<div>
<input type="text" id="item" name="itemName" style="background-color: #f0f0ff;" class="inline" value="とろろ芋">
<input type="hidden" id="vcode" value="K085">
</div>
