Select2自定義標籤，選擇變換值

Question

我想要一個文本的下拉列表，然後當選擇一個時，我想加載完整的值作爲標籤並使其表現正常。

我正在捕獲所選的值，然後清除列表並將它們作爲文本附加到.select2-choices div中。它似乎按照它應該的方式工作，但我已經失去了手動附加標籤清除清除的能力。

標記：

<div id="select2-container"> 
    <select multiple class="select2" id="select2"> 
     <optgroup label="GroupName"> 
      <option value="John Smith - GroupName (ID:12345678)">John Smith</option> 
     </optgroup> 
    </select> 
</div> 

腳本：

$('#select2').select2({    
    }).on('change', function (e) { 
     values = $(this).val(); 
     console.log(values); 
     $('#select2-container .select2-choices').empty(); 
     for (var i = 0; i < values.length; i++) { 
      console.log(values[i]); 
      $('#select2-container .select2-choices').append('<li class="select2-search-choice"><div>' + values[i] + '</div><a href="#" class="select2-search-choice-close" tabindex="-1"></a></li>'); 
     } 
    }); 

我要去尋找到的formatSelection功能，但任何幫助是極大的讚賞。

Answer 1

您現在可能已經解決了這個問題，但您確定要使用formatSelection。

默認情況下，使用所選對象的text屬性，但您希望使用id屬性。 id屬性是<option>元素的值。

$('#select2').select2({ 
    formatSelection: function(object) { 
     return object.id; 
    } 
}); 

jsfiddle

Answer 2

這是在我的項目的解決方案：

在edit.php文件：

溶液1（美食ID爲單數）：

<?php 
    $cate_row = $db->fetchRow("SELECT cate_id, cate_name FROM categories WHERE cate_id=".$editdata[cate_id]." AND cate_status='Active'"); 
    $cateArray[] = array("id"=>$cate_row['cate_id'], "text"=>$cate_row['cate_id']." - ".$cate_row['cate_name']); 

    echo "<script type=\"text/javascript\"> 
     AjaxCombo('#categories', '/ajax/getCategories.php', true) 
    </script>"; 

    echo "<input type=\"hidden\" name=\"sl2\" id=\"categories\" value='".json_encode($cateArray)."' data-placeholder=\"Select a category for this product..\" style=\"width: 400px !important;\" />"; 
?> 

溶液2（美食id爲數組：12,4,5,6或，12,4,5,6，）：

<?php 
    $cate_q = $db->query("SELECT cate_id, cate_name FROM categories WHERE cate_status='Active' ORDER BY cate_name ASC"); 

    // array: ,12,4,5,6, 
    $editcate_array = explode(",", substr($editdata[cate_id], 1, $editdata[cate_id] - 1)); 
    // or array 12,4,5,6 
    // $editcate_array = explode(",", $editdata[cate_id]); 

    while($cate_row = $db->fetch_array($cate_q)){ 
     if(in_array($row['cate_id'], $editcate_array)) { 
      $cateArray[] = array("id"=>$cate_row['cate_id'], "text"=>$cate_row['cate_id']." - ".$cate_row['cate_name']); 
     } 
    } 

    echo "<script type=\"text/javascript\"> 
     AjaxCombo('#categories', '/ajax/getCategories.php', true) 
    </script>"; 

    echo "<input type=\"hidden\" name=\"sl2\" id=\"categories\" value='".json_encode($cateArray)."' data-placeholder=\"Select a category for this product..\" style=\"width: 400px !important;\" />"; 
?> 

在JS global.js：

function AjaxCombo(elm, url, multiple) { 
    $(document).ready(function() { 
     $(elm).select2({ 
      multiple: multiple, 
      minimumInputLength: 1, 
      ajax: { 
       url: url, 
       dataType: 'json', 
       quietMillis: 100, 
       data: function (term, page) { 
        return { q: term }; 
       }, 
       results: function (data, page) { 
        return {results: data}; 
       } 
      }, 
      // Add new category if no exist 
      createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} } 
     }); 
     $(elm).select2("data", JSON.parse($(elm).val())); 
    }); 
} 

默認如果表單編輯含有數據select2 init「id - 名稱類別」。

文件getCategories.php：從選擇你$q = $input->gc['q']和MySQL是cate_name LIKE '%" . $q . "%';

while($row = $db->fetch_array($result)){ 
    $dataArray[] = array("id"=>$row['cate_id'], "text"=>$row['cate_id']." - ".$row['cate_name']); 
} 

header('Content-Type: application/json'); 
echo json_encode($answer); 

時，你得到價值形態選擇2，你可以嘗試：

foreach ($_GET['select2'] as $value) { 
    echo $value; 
} 

完成！