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（cate 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（cate 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()));
    });
}

默认如果表单编辑有cate数据select2 init＆＃34; id - 名称类别＆＃34;。

在文件getCategories.php中：从select中得到$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);

获取值表单select2时，您可以尝试：

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

完成！

选择2自定义标签，选择转换值

2 个答案: