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; 
} 

完成！