从数据库加载时克隆 Selectize

Question

我有一个带有 Selectize.js 的选择器，我希望用户能够像这里一样克隆它：Selectize.js ComboBox：克隆和销毁。另外，我希望原始版本和克隆版本使用 AJAX.

从我的数据库加载数据

目前我可以从数据库加载，我可以克隆选择器；但如果我这样做，新选择器会清除前面选择器的存储值。

我的HTML是这样的：

<div id="clone_me_id">
    <div class="clone_me_class">
        <select class="selector_class">
        </select>
    </div>
    <button type="button" id='cloner_button'>Add another</button>
</div>

这是我的脚本。主要调用 Selectize.js 并执行 php 从数据库中获取数据：

<script>
    function selectizeme(){
    $('.selector_class').selectize({
        valueField: 'id',
        labelField: 'name',
        searchField: 'name',
        options: [],
        persist: false,
        maxItems: 2,
        create: true,
        sortField: 'text',
        createOnBlur: true,
        sortField: 'text',
        load: function(query, callback) {
            if(!query.length>2) return callback();
            $.ajax({
                url: 'ajax.php', //relative url to the php script that loads the data and send it in JSON format
                type: 'POST',
                dataType: 'json',
                data: {
                    name: query,
                },
                success: function(res) {
                    callback(res);
                },
                error: function(data) {
                    alert('error');
                }
            });
        }
    });
}
</script>

以及克隆选择器的脚本

<script>
    // When cloner_button button is clicked
    $('#cloner_button').on('click',function(){
        $('.selector_class').each(function(){ // do this for every select with the 'selector_class' class
        if ($(this)[0].selectize) { // requires [0] to select the proper object
            var value = $(this).val(); // store the current value of the select/input
            $(this)[0].selectize.destroy(); // destroys selectize()
            $(this).val(value);  // set back the value of the select/input
        }
    });
    $('#clone_me_id .clone_me_class:first')
    .clone() // copy
    .insertAfter('#clone_me_id .clone_me_class:last'); // where
    selectizeme(); // reinitialize selectize on all .selector_class
});
$(function(){ // same as $(document).ready()
    selectizeme(); // selectize all .selector_class
});
</script>

这是我对数据库的查询php（这里没有问题）

<?php
$search =  $_POST['name'];
$connection = new mysqli('localhost','***','***','***');
$sql = "SELECT a.id AS id, a.name AS name
FROM user a
WHERE name LIKE '%$search%'";
$result = mysqli_query($connection, $sql) or die("Error " .mysqli_error($connection));
$rows = array();
while ($row = mysqli_fetch_assoc($result))
{
    extract($row);
    $rows[] = "{ \"id\": \"$id\",\"name\": \"$name\"}";
}
header('Content-Type: text/javascript; charset=UTF-8');
echo "[\n" .join(",\n", $rows) ."\n]";
?>

有谁知道我怎样才能避免克隆器删除前一个选择器的值？欢迎任何帮助！

N.

编辑：

好的，我以添加以下行的解决方案结束：

var select = $(this)[0].childNodes[0]; // store the childNodes (options) of the select
var clone = select.cloneNode(true); // clone the stored options
$(this)[0].appendChild(clone); // append the cloned options to the new select

到克隆选择器的脚本，像这样：

<script>
    // When cloner_button button is clicked
    $('#cloner_button').on('click',function(){
        $('.selector_class').each(function(){ // do this for every select with the 'selector_class' class
        if ($(this)[0].selectize) { // requires [0] to select the proper object
            var value = $(this).val(); // store the current value of the select/input
            var select = $(this)[0].childNodes[0]; // store the childNodes (options) of the select
            var clone = select.cloneNode(true); // clone the stored options
            $(this)[0].selectize.destroy(); // destroys selectize()
            $(this)[0].appendChild(clone); // append the cloned options to the new select
            $(this).val(value);  // set back the value of the select/input
        }
    });
</script>

这对多个选择器不起作用，并且还会在新选择器中重复最后一个选择器的值。但这是一个开始！

N.

Answer 1

创建一个片段（其他人可以玩）有很长的路要走。与我网站上的例子不同，它有预设的选项，你的 select 没有。代码示例基于现有选项。在你的情况下，你没有任何选项，所以一旦 selectize 被销毁，原始 SELECT 就没有任何选项可以设置。您需要添加 Javascript 才能做到这一点：

var value = $(this).val(); // store the current value of the select/input
$(this)[0].selectize.destroy(); // destroys selectize()
// CREATE the OPTION
$(this).val(value);  // set back the value of the select/input

这是我最好的猜测。

从数据库加载时克隆 Selectize

Clone Selectize while loading from database

javascript

jquery

selectize.js