Select2 자리 표시 자 값을 제출하십시오.

Question

나는 거대한 드롭 다운 목록에 우편 번호가 있습니다. 일반 드롭 다운 목록으로 아래로 스크롤하는 것이 어렵 기 때문에 Select2 jQuery (버전 4) 드롭 다운을 구현하는 아이디어가 나왔습니다. 이제는 자연의 특성과 목록의 크기로 인해로드하는 데 시간이 오래 걸립니다. 따라서 일부 페이지 매김을 사용하여 초기 목록을 50 개 항목으로 제한하고 스크롤 또는 검색을 사용하여 항목을 확장 할 수는 있습니다. 결국 나는 페이지 매김이 아약스 로딩을 위해 예약되어 있다는 것을 알았습니다. (필자가 정확하게 문서를 읽고 있다면) 나는 피하고 싶습니다. 데이터베이스에서이

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

내가 (설계에서 요구하는) 두 개의 데이터베이스 분야에서 자리를 data-name 및 data-postal-number를 삽입하고 같은

나의 현재 옵션 그룹 보인다.

나는 선택 2의 초기화를위한 JS 다음 생성 관리하지만, 데이터베이스 (CodeIgniter의 3을 사용하지만, 문제에 대한 의심 그게 관련)

에 제출 제대로 설정 자리를 가지고 관리하는 방법을 모르고에게이 없었다

$.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 
     }); 
    }); 

어떤 도움이나 그것에 대해 읽는 정보 더 감사보다 (... 진짜 아약스/JSON 로딩 가능한 경우를 피하기 위해 같은 것)를 사용하여의

Answer 1

대신 사전에

감사 HTML data-* attri butes, HTML <option value="...">을 사용해보십시오.

그런 다음 값 내에 City Name과 11111을 연결하고 일부 구분 기호를 사용하십시오 (예 : |||).

그 후 당신은 값의 서버 측 모두 추출 할 수 있습니다 (예를 들어, 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" 
?>