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]";
?>

任何人都知道如何避免克隆人删除前一个选择器的值？欢迎任何帮助！

<磷>氮

编辑：

好的，我最后添加了一行解决方案：

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>

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

<磷>氮

Answer 1

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

这是我最好的猜测。

从数据库

1 个答案: