Bokeh 3.6.0：如何通过Dropdown触发对应Dialog弹窗

要实现Dropdown选择对应选项打开不同Dialog，不能直接给js_on_click传字典映射，得通过CustomJS做条件判断，同时要确保Dialog实例被添加到文档中。修正后的代码如下：

from bokeh.models import (
    Div,
    CustomJS,
    Dropdown,
    Dialog,
)
from bokeh.plotting import curdoc

d1 = Dialog(title="Dialog 1", content=Div(text="<h1>Dialog 1</h1>"))
d2 = Dialog(title="Dialog 2", content=Div(text="<h1>Dialog 2</h1>"))

menu = Dropdown(label="Test", menu=["option1", "option2"])

# 用CustomJS实现选项与Dialog的映射
menu.js_on_click(CustomJS(args=dict(d1=d1, d2=d2), code="""
    // this.item 获取当前选中的下拉菜单项文本
    if (this.item === "option1") {
        d1.open();
    } else if (this.item === "option2") {
        d2.open();
    }
"""))

# 必须将Dialog添加到文档中才能渲染显示
curdoc().add_root(d1)
curdoc().add_root(d2)
curdoc().add_root(menu)

关键说明 #

• CustomJS的args参数将Python端的Dialog实例传递给JS环境
• 在JS代码中，通过this.item获取Dropdown当前选中的选项内容
• 调用Dialog的open()方法直接触发弹窗显示
• 所有Dialog实例必须通过curdoc().add_root()添加到文档，否则无法在页面渲染

内容的提问来源于stack exchange，提问作者Nic