如何在外部文件中创建选择菜单并将其嵌入到html中以显示菜单

Question

我的网站有成员的个人页面，但我有一个用于从一个成员滚动到另一个成员的选择菜单。我在每个页面的html中都有编码的选择菜单，但是由于我的会员资格不断增长，我需要一个更好的解决方案。

我需要能够在单独的文件中创建相同的选择菜单，当选择跳转到另一个成员页面时，将其嵌入到我需要它的正文中，这样我所要做的就是改变/更新外部文件，它将为所有成员页面完成。

我已经查看了javascripting it，mysqling it，但无法找到（在youtube上查找）一个代码来帮助我完成我需要的东西。

我选择的典型代码

//（选择..... //（选项值=＆＃34; http：www.website-Profile-blahblah.html ......等等。

我需要从外部文件中取出它以便全面使用并将其放在我需要它的主体中。

感谢您提供的任何帮助。

Answer 1

一般来说，这听起来像你应该使用后端渲染引擎。就选择而言，这将是一个使用下拉菜单的好地方，例如bootstrap提供的菜单，因为单击选择实际上不会将您移动到另一个页面。 如果您不想使用/不能使用后端渲染引擎来渲染选项，我建议您查看angular.js，它具有很好的ng-repeat和ng-option功能，可以让您动态构建选择/尽可能多的用户下拉。

angular ng-repeat page：https://docs.angularjs.org/api/ng/directive/ngRepeat

bootstrap下拉列表：http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp（注意a标签可以直接进入用户页面）

Answer 2

根据这种情况的经验，使用SQL表来存储您想要使用的链接要容易得多。接下来要做的是让你的后端向你发送链接列表。这样，您可以动态创建选项标记并将其附加到您的选择标记。 newOptionTag.setAttribute('value', 'url')，document.createElement('option')和selectElement.appendChild(newOptionTag)等功能应该可以帮助您

Answer 3

如果您确实想使用单独的文件，可以将成员名和链接存储在json文件中。在文档加载时获取文件，解析它，然后使用该对象构建选项。

w3schools网站（尽管有些人不赞成）有一个json教程和一个已经在那里的例子。

编辑：我看到它实际上使用mysql来构建json文件...