Javascript 多个fastselect刷新将允许在第一次单击时添加，但在从列表中选择后不起作用_Javascript_Html

Javascript 多个fastselect刷新将允许在第一次单击时添加，但在从列表中选择后不起作用

javascript html

Javascript 多个fastselect刷新将允许在第一次单击时添加，但在从列表中选择后不起作用,javascript,html,Javascript,Html,我正在使用多个fastselect。我似乎无法让刷新工作。我的意思是，在从下拉列表中选择项目后，我需要能够向列表中添加一个新选项如果我第一次单击add按钮1，它就会工作。当我从列表中选择一个项目，然后再次单击添加按钮1将其添加到列表中时，添加不再起作用有没有关于我可能做错了什么的建议 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

我正在使用多个fastselect。我似乎无法让刷新工作。我的意思是，在从下拉列表中选择项目后，我需要能够向列表中添加一个新选项

如果我第一次单击add按钮1，它就会工作。当我从列表中选择一个项目，然后再次单击添加按钮1将其添加到列表中时，添加不再起作用

有没有关于我可能做错了什么的建议

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="css/fastselect.min.css">

    <script src="js/jquery_2.1.1.js"></script>
    <script src="js/fastselect.standalone.min.js"></script>

    <style type="text/css">
        .fstResultItem .fstSelected {
            background-color: green;
        }
    </style>
</head>

<body>

    <div class="container">

        <h2>Multiple Select</h2>
        <div>
            <select id="example2" class="example2" multiple="multiple">
                <option value="test1">C1</option>
                <option value="test2">C2</option>
                <option value="test3">C3</option>
                <option value="test4">C4</option>
                <option value="test5">C5</option>
                <option value="test6">C6</option>
                <option value="test7">C7</option>
                <option value="test8">C8</option>
                <option value="test9">C9</option>
            </select>

            <div>
                <button id="button1">Add Item Set 1</button>
                <button id="button2">Add Item Set 2</button>
                <button id="rebuild">Rebuild</button>
            </div>


        </div>

    </div>

    <script type="text/javascript">
        $(document).ready(function () {


            $('#example2').fastselect({});

            $('#button1').click(function () {
                //alert('button1 click');
                $('#example2').append('<option value="add1">Addition 1</option>');
                setTimeout(function () {
                    $('#example2').fastselect();
                }, 500);
            });

            $('#button2').click(function () {
                //alert('button2 click')
                $('#example2').append('<option value="add1">Addition 1</option>');
            });

            $('#rebuild').click(function () {
                alert('rebuilding');
                $('#example2').fastselect();
            });

        });
    </script>

</body>

</html>

调用时，select的初始选项会复制到隐藏的div中。fastselect可以使用开发人员工具进行检查。随后对选项的添加不会反映在副本中

一种可能的解决方案是从select中删除fastselect，然后再次添加：

$('#example2').append('<option value="add1">Addition 1</option>').data('fastselect').destroy();
$('#example2').fastselect();

第一行添加新的select选项，然后销毁fastselect实例，第二行再次对其进行初始化。

调用时，select的初始选项会复制到隐藏的div中。fastselect可以使用开发人员工具进行检查。随后对选项的添加不会反映在副本中

一种可能的解决方案是从select中删除fastselect，然后再次添加：

$('#example2').append('<option value="add1">Addition 1</option>').data('fastselect').destroy();
$('#example2').fastselect();

第一行添加新的选择选项，然后销毁fastselect实例，第二行再次初始化它。

非常感谢。这解决了问题。非常感谢。这解决了问题。