带有 selectize.js 的 onBlur 事件

Question

我在我的应用程序（ https://github.com/selectize/selectize.js ）中使用 selectize.js 包，并且我正在尝试使用 onBlur 事件对用户选择的选项进行分类而没有成功。 波纹管是一个示例代码：

<html>
<head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
        <div class="demo">
            <div class="control-group">
                <label for="select-beast-single-disabled">Onblur:</label>
                <select id="select-beast-single-disabled" class="demo-default" placeholder="Select a person...">
                    <option value="">Select a person...</option>
                    <option value="1">Arnold</option>
                    <option value="2" selected>Nikola Tesla</option>
                </select>
            </div>
            <script>
                $('#select-beast-single-disabled').selectize({
                    create: true,
                    sortField: {field: 'text'},
                        onBlur: function () {

                            input = document.getElementById('select-beast-single-disabled');

                            console.log(input.value)

                        }
                });
            </script>
        </div>
</body>
</head>
</html>

重现步骤：

通过控制台检查选择
选择“阿诺德”
在控制台中，console.log 将打印“”
然后，如果再按一次，将打印 1

预期结果：

在我们第一次选择选项时，选择必须“模糊”选择并记录正确的选项，没有“”。

实际结果：

我们必须在同一个选项上单击两次才能使用正确的选项更新 console.log 中的值。

有什么解决方法吗？ 先感谢您！

Answer 1

你试过onChange(value)而不是onBlur()吗？ 似乎这正是您想要的。

<html>
<head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
        <div class="demo">
            <div class="control-group">
                <label for="select-beast-single-disabled">Onblur:</label>
                <select id="select-beast-single-disabled" class="demo-default" placeholder="Select a person...">
                    <option value="">Select a person...</option>
                    <option value="1">Arnold</option>
                    <option value="2" selected>Nikola Tesla</option>
                </select>
            </div>
            <script>
                // save select to variable
                var $select = $('#select-beast-single-disabled').selectize({
                    create: true,
                    sortField: {field: 'text'}
                });

                // fetch the instance
                var selectize = $select[0].selectize;

                // attach blur event
                selectize.on('blur', function onBlur() {
                    // get the value from selectize instance.
                    console.log(selectize.getValue());
                });

            </script>
        </div>
</body>
</head>
</html>

带有 selectize.js 的 onBlur 事件

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-12 13:06:38

带有 selectize.js 的 onBlur 事件

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-12 13:06:38

解决方案1
1 已采纳 2019-12-12 13:06:38