Select2プレースホルダの値を送信

Question

私は郵便番号のリストを巨大なドロップダウンリストがあります。通常のドロップダウンリストでそれを下にスクロールするのはむしろ難しいので、Select2 jQuery（バージョン4）ドロップダウンを実装するアイデアが出てきました。さて、それの性質とリストのサイズのために、ロードに時間がかかるので、私はいくつかのページネーションを使用して初期リストを50項目に制限し、スクロールまたは検索でそれを展開することができます。最終的に私はページングがajaxの読み込みのために確保されていることを知りました（私が正しくドキュメントを読んでいる場合）。これは避けたいものです。

私の現在のオプショングループは、私が（設計で必要とされる）の2つのデータベースのフィールドにプレースホルダdata-nameとdata-postal-numberを挿入していたデータベースでこの

<option data-name="City Name" data-postal-number="11111">City Name [11111]</option> 

のように見えます。

私は

Selectセレクトの初期化のためのJSを、次の作成するために管理していますが、正常にデータベースにそれを提出することで設定したプレースホルダ持って管理する方法は考えていません（CodeIgniterの3を使用しますが、問題のためのthatsの関連を疑う）しています

$.fn.select2.amd.require(
    ['select2/data/array', 'select2/utils'], 
    function (ArrayData, Utils) { 
     function CustomData($element, options) { 
      CustomData.__super__.constructor.call(this, $element, options); 
     } 

     function contains(str1, str2) { 
      return new RegExp(str2, "i").test(str1); 
     } 

     Utils.Extend(CustomData, ArrayData); 

     CustomData.prototype.query = function (params, callback) { 
      if (!("page" in params)) { 
       params.page = 1; 
      } 
      var pageSize = 50; 
      var results = this.$element.children().map(function(i, elem) { 
       if (contains(elem.innerText, params.term)) { 
        return { 
         id:[elem.innerText, i].join(""), 
         text:elem.innerText 
        }; 
       } 
      }); 
      callback({ 
       results:results.slice((params.page - 1) * pageSize, params.page * pageSize), 
       pagination:{ 
        more:results.length >= params.page * pageSize 
       } 
      }); 
     }; 

     $("#postal_number_selector").select2({ 
      ajax:{}, 
      allowClear:true, 
      width:"element", 
      dataAdapter:CustomData 
     }); 
    }); 

感謝以上であることについて読むために任意のヘルプまたは情報は、（可能ならば実際のAJAX/JSONの負荷を避けたい...）事前

Answer 1

で

おかげ代わりにHTML data-* attriを使用しますbutes、HTML <option value="...">を使用してみてください。

次に、City Nameと​​の両方を連結し、一部の区切り記号（例：|||）を連結します。

その後あなたは（例えばPHPやASPを使用して - それはあなたのサーバー側のアーキテクチャに依存します）両方の値のサーバー側を抽出することができますオプションタグ（<option value = "City Name|||11111">City Name [11111]</option>）から送信された値を分割することによって。

これは私がPHPのサーバー側でそれを行うだろうかです：

<?php 
$select_name = isset($_POST['select_name']) ? $_POST['select_name'] : ""; 
//Get the value(s) and extract them 
$select_value = explode("|||", $select_name); 

echo $select_value[0]; //This should contain "City Name" 
echo $select_value[1]; //This should contain "11111" 
?>