我在应用程序(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/