渲染后显示选择器

Question

我在一个表单中有几个 selectpicker 元素，它们需要大约 0.5 秒来呈现。这对我来说很好，但是在它们被渲染之前，它们会弄乱我的 html 结构。所以我只想在它们被渲染后展示它们。 我的方法如下。我将所有 selectpicker 元素设置为 display:none 并添加了以下 javascript 代码

$("#state_selection").selectpicker();
$("#country_selection").selectpicker();
document.getElementById('state_selection_element').style.display = '';
document.getElementById('country_selection_element').style.display = '';

这基本上做了我想要的。除了两个问题：

(1) 这是次优的，因为渲染命令会在页面加载后强制表单再次渲染。由于渲染大约需要 0.5 秒，因此并不理想。应该有更好的方法

(2) 渲染以某种方式弄乱了我的反馈验证复选框的位置。它现在在选择器中显示反馈，而不是在它的右侧。

理想的解决方案是仅在初始页面渲染后显示选择器...知道如何做到这一点吗？

Answer 1

我找到了解决办法

$('#state_selection').on('rendered.bs.select', function (e) {
    document.getElementById('state_selection_element').style.display = '';
});
$('#country_selection').on('rendered.bs.select', function (e) {
    document.getElementById('country_selection_element').style.display = '';
});