antd的select如何通过js触发事件

Question

document.querySelector('section#components-select-demo-basic .ant-select input').focus()

document.querySelector('section#components-select-demo-basic .ant-select ').click()
document.querySelector('section#components-select-demo-basic .ant-select ').focus()

上面的代码均无法触发antd的select下拉事件。

请问如何用原生js触发antd的下拉。【不用问为什么】

Answer 1

document.getElementById("province").fireEvent('mousedown')

Answer 2

从两个地方排查，一是你是否正确地选择了 Select 元素，二是点击的时机是否正确，确保在组件挂载后进行点击。

Answer 3

defaultOpen 是否默认展开下拉菜单

我在想你是不是想默认展开菜单呢

Answer 4

open 是否展开下拉菜单 boolean -

既然使用了数据驱动框架就尽量不要直接操作DOM，设置一个open变量，当想展开下拉的时候设置为true即可

Answer 5

使用js触发select onchange事件select 或text的onchange事件需要手动（通过键盘输入）改变select或text的值才能触发，如果在js中给select或text赋值，则无法触发onchang事件。例如，在页面加载完成以后，需要触发一个onChange事件，在js中用document.getElementById("province").value="河南";直接给select或text赋值是不行的，要想实现手动触发onchange事件，需要在js给select赋值后，加入下面的语句 ：
document.getElementById("province").fireEvent('onchange') 来实现。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。