Javascript 更改bootstrap 4下拉菜单选项以在html中显示和隐藏div

我有一个带有3个选项的dropdowm菜单栏。当我更改选项时，我需要隐藏/显示div。你能告诉我如何使用jquery吗

选定选项1
选定选项2
所选选项3

$（文档）.ready（函数（）{
$（'.group'）.hide（）；
$（'#option1'）.show（）；
$（'#外部'）。更改（函数（）{
$（'.group'）.hide（）；
$（'#'+$（this.val（））.show（）；
})
});
#选项1{
背景色：红色；
高度：400px；
颜色：白色；
}
#选择2{
背景颜色：蓝色；
高度：400px；
颜色：白色；
}
#选择3{
背景颜色：绿色；
高度：400px；
颜色：白色；
}

选择1
选择2
选择3
红色
蓝色
绿色
$（函数（）{
$（“#选项1”）。单击（函数（）{
警报（“服务”）；
$（“#服务图表”）.show（）；
$（'#选项2'）.hide（）；
$（“#选项-3”）.hide（）；
$（“#关于我们”）.text（$（this.text（））；
});
$（“#选项2”）。单击（函数（）{
警报（“销售”）；
$（'#选项-1'）.hide（）；
$（'#选项2'）.show（）；
$（“#选项-3”）.hide（）；
$（“#关于我们”）.text（$（this.text（））；
});
$（“#选项3”）。单击（函数（）{
警惕（“召回”）；
$（'#选项-1'）.hide（）；
$（'#选项2'）.hide（）；
$（'#选项3'）.show（）；
$（“#关于我们”）.text（$（this.text（））；
});
});


选择程序：
选择1
选择2
选择3
红色
蓝色
绿色
我需要带Bootstrap4的“下拉菜单”选项。不使用“”选项。