Javascript 一个html页面上多个页面的下拉菜单

我想把多个不同的页面放到一个html页面中。我已经有了这方面的代码，但现在我想把页面放到一个下拉菜单。例如，对于我提供的代码，我希望1是唯一显示的项目，然后如果单击它，就会出现一个带有2和3的下拉菜单。选择2后，它将是唯一显示的项目，但单击它后，将显示一个包含其余项目的下拉菜单。我已经尝试过这些代码，但我不知道如何将它们放到这个下拉菜单中。有人有什么解决办法吗

编辑：我更喜欢在不使用选择框的情况下形成下拉菜单。 我想自定义下拉框，使其看起来更干净，与页面分开，而你不能用选择框来实现这一点。我喜欢文本居中，当你把选项放下来时，它们会放在一个没有边框/轮廓的白色框中

功能显示（elementID）{
var ele=document.getElementById（elementID）；
如果（！ele）{
警报（“无此类元素”）；
返回；
}
var pages=document.getElementsByClassName（'page'）；
对于（变量i=0；i

span{
文字装饰：下划线；
颜色：蓝色；
光标：指针；
}

显示第1、2、3页。

第1页内容
第2页内容
第3页内容

您可以使用jquery执行此操作，使用on事件：

$（“#drop”）.on（'change'，function（）{
var值=$（this.val（）；
如果（值）{
$（“.page”）.hide（）；
$（“#页面”+值）.show（）；
}
});
span{
文字装饰：下划线；
颜色：蓝色；
光标：指针；
}
.dropStyle{
宽度：100px；
/*文本缩进：35px*/
左：6%；
背景色：白色；
/*边界：无*/
边框：1px实心#e0；
高度：20px；
}

显示页面
1.
2.
3.
第1页内容
第2页内容
第3页内容
我是否可以在没有选择框的情况下执行此操作？我想自定义下拉菜单，使它看起来更干净，页面的一部分。我想做一些更改，例如将文本居中，并使下拉式背景为白色，无边框。@user7548188您可以使用
标记进行更改，查看，我还通过添加新样式编辑了答案。