読者です 読者をやめる 読者になる 読者になる

inputタグを クリックで select タグに切り替える。

HTML の selectタグを1000個以上も書いて、堂々としている人がいます。
困ったものです。

ページの初期表示は、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>