javascript - 多个快速选择刷新将允许在第一次单击时添加,但从列表中选择后不起作用

标签 javascript html

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

如果我第一次点击添加按钮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>

最佳答案

调用 .fastselect() 时,select 的初始选项会被复制到隐藏的 div 中(您可以与开发人员核实)工具)。后来添加的选项不会反射(reflect)在副本中。

一个可能的解决方案是从 select 中删除 fastselect,然后再次添加:

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

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

关于javascript - 多个快速选择刷新将允许在第一次单击时添加,但从列表中选择后不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52898095/

相关文章:

html - 从CSS中的容器div中减去一个洞

JavaScript 在继续脚本之前等待图像完全加载

javascript - Vue.js 去抖动滚动

JavaScript 按钮切换

javascript - Cordova - 如何使用 Node.js 服务器制作在线应用程序/游戏

javascript - srcElement 在 IE9 中不起作用

javascript - 调用文件删除页面后返回页面状态

html - iframe 中的 iframe 无法加载

jquery - 使下拉父链接对于较小的设备可点击,并在 Bootstrap 中隐藏下拉菜单

html - 使用 CSS 切换 block 元素的顺序