javascript - 从数据库加载时克隆选择

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并ejecute 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

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

这是我最好的猜测。