twitter-bootstrap – 使用bootstrap select插件在select上触发

发布时间：2020-12-17 21:24:28 所属栏目：安全来源：网络整理

导读：所以我一直在制作Marketo表单,然后添加个人样式和调整来改进UI.其中一个调整是使用bootstrap select替换现有的select下拉列表(替换它们的小JS插件). 两个选择是链接的,但是当原始选择发生更改时,它需要更改事件来触发一些条件逻辑,以确定是否应显示另一个选

所以我一直在制作Marketo表单,然后添加个人样式和调整来改进UI.其中一个调整是使用bootstrap select替换现有的select下拉列表(替换它们的小JS插件).

两个选择是链接的,但是当原始选择发生更改时,它需要更改事件来触发一些条件逻辑,以确定是否应显示另一个选择.现在我正在做的是在bootstrap选择上绑定一个click事件,然后尝试在原始select上触发change事件,如下所示：

$jQ('li').click(function() {

console.log('LI Should trigger click on DD now.');
   event = document.createEvent("HTMLEvents");
   event.initEvent("change",true,false);
   input.dispatchEvent(event); 
});

这具有所需的效果,但仅在第二次单击下拉列表后.所以在这里发生的情况是,如果用户从引导选择中选择例如“America”,它将更新原始选择,然后应该出现包含“状态”的另一个下拉列表,这将仅在我第二次单击引导选择时发生.所以说我选择“美国”然后其他任何东西,状态字段只会出现.有关为什么会发生的任何想法？同样的事情也需要使状态字段消失.

解决方法

所以我想出了问题,这是因为事件在原始下拉列表有机会更新其值之前触发,解决方案是在setTimeout中包装dispatchEvent调用.

所以这就是(如果有人碰巧遇到同样的问题！)

setTimeout(function() {
 document.getElementById('Country').dispatchEvent(new Event('change',{ 'bubbles': true }));
 },200);

正如您所看到的,我只是将代码缩减为单行.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!