从数据库加载时克隆选择

Question

我有一个带有 Selectize.js 的选择器，我希望用户能够像这里一样克隆它：Selectize.js ComboBox: Cloning and Destroying 。另外，我希望原始版本和克隆版本使用 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

创建一个 sn-p（其他人可以玩）有很长的路要走。与我网站上具有预设选项的示例不同，您的选择没有任何选项。代码示例基于现有选项。在您的情况下，您没有任何选项，因此一旦 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

这是我最好的猜测。