Javascript 从数据库加载时克隆选择

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

复制到克隆选择器的脚本，如下所示：

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

//单击cloner_按钮时
$（“#cloner_按钮”）。在（'click'，function（）上{
$（'.selector_class'）。每个（function（）{//使用'selector_class'类对每个select执行此操作
if（$（this）[0].selectize）{//需要[0]选择正确的对象
var value=$（this）.val（）；//存储选择/输入的当前值
var select=$（this）[0].childNodes[0]；//存储select的childNodes（选项）
var clone=select.cloneNode（true）；//克隆存储的选项
$（此[0]。selectize.destroy（）；//destroy selectize（）
$（this）[0].appendChild（clone）；//将克隆的选项附加到新的选择项
$（this）.val（value）；//设置select/input的值
}
});

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

N.

创建一个片段（其他人可以使用）很长一段路要走。与我的网站上有预设选项的示例不同，您的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

---

这是我最好的猜测。

太好了，谢谢！我刚刚用添加到脚本中的行编辑了我的问题。这不是完美的解决方案，但很有效……做一个好公民，并将答案标记为“正确”（绿色复选框）。对不起，我忘了……完成了！

<?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>

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