我在应用程序(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中的值。

有什么解决方法吗?先感谢您 !

最佳答案

您是否尝试过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>

关于javascript - 与selectize.js的onBlur事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59305259/

10-12 01:16