文章/答案/技术大牛

发布

问onBlur事件与selectize.js
EN

Stack Overflow用户

提问于 2019-12-12 13:03:18

回答 1查看 1K关注 0票数 0

我在我的应用程序(https://github.com/selectize/selectize.js)中使用了https://github.com/selectize/selectize.js包，并且我尝试使用onBlur事件设置用户选择的选项，并成功地使用onBlur事件。Bellow是一个代码，例如：

<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
检查选择控制台中的“Arnold”
，console.log将打印“
”，如果再次按下，将打印1

G 211

预期结果：

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

实际结果：

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

有什么解决办法吗？提前谢谢你！

javascript

jquery

selectize.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-12 13:06:38

你试过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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59305259

复制

相似问题

问onBlur事件与selectize.js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onBlur事件与selectize.jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onBlur事件与selectize.js
EN