Javascript 在一个网站上有多个x3d文件

我正在制作一个显示多个x3d文件的网站，我只有的代码立即显示一个文件（如下所示）

---

我试图通过这个网站实现的是在“区域”下拉菜单或“模型类型”菜单中找到x3d模型。我想让用户选择的两个模型并排显示。问题是，我如何在下拉菜单中获取模型，以及如何显示它们？我不确定您是如何填充区域和模型列表的，所以让我们使用您拥有的HTML

我们将使用DOM元素来填充列表。为此，我们需要添加一个unuique标识符

<ul id="menu">
    <li><a href="#">Areas</a>
        <ul id="area_list">
            <li><a href="#">area1</a></li>
            <li><a href="#">area2</a></li>
            <li><a href="#">area3</a></li>
        </ul>
    </li>
    <li><a href="#">Types of models</a>
        <ul id="model_list">
            <li><a href="#">model1</a></li>
            <li><a href="#">model2</a></li>
            <li><a href="#">model3</a></li>
            <li><a href="#">model4</a></li>
            <li><a href="#">model5</a></li>
        </ul>
    </li>
</ul>

这将向区域列表中添加所有区域项目。。然后，您可以看到如何对模型执行相同的操作

我想这就是你想要的，但是你的问题很难理解

需要注意的几件事： 使用

jQuery

可以更容易、更方便地实现这一点，尽管这不是强制性的

---

如果使用文件系统列表填充列表，则需要服务器端逻辑将数据（文件列表）发送到javascript。单靠Javascript并没有一种本地方法可以实现这一点。（不包括

nodeJS

server）

问题是什么？您在哪里定义了区域和模型类型？问题是，如何在下拉菜单中设置模型以及如何显示模型我将所有模型与HTML文件夹放在同一个文件夹中我的目标是最终产品，网站有两个下拉菜单“区域”和“模型类型”，在这两个下拉菜单中有我拥有的所有x3d模型，并显示用户选择并并排显示的任何两个模型。我的问题是，如何将x3d模型加载到网站中，以及如何将它们放入两个下拉列表中menus@user3057793你需要一些Web服务器，你有一个服务器端语言的图例可供选择，如果合适的话，我可以为你写一个

PHP

示例？我想他们是我要做的方式，就是去掉下拉菜单，显示所有的模型，允许用户选择两个模型并排显示

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}

body{
   background-color: black;
}

h1{
    color: white;
    text-indent: 600px;
}
p{
      color: white;
}

<ul id="menu">
    <li><a href="#">Areas</a>
        <ul id="area_list">
            <li><a href="#">area1</a></li>
            <li><a href="#">area2</a></li>
            <li><a href="#">area3</a></li>
        </ul>
    </li>
    <li><a href="#">Types of models</a>
        <ul id="model_list">
            <li><a href="#">model1</a></li>
            <li><a href="#">model2</a></li>
            <li><a href="#">model3</a></li>
            <li><a href="#">model4</a></li>
            <li><a href="#">model5</a></li>
        </ul>
    </li>
</ul>

var areaList = [],
    modelList = [];

function populateLists(){
  alert("running");
    var areaUL = document.getElementById('area_list').children;
    var modelUL = document.getElementById('model_list').children;

    for(var i = 0; i < areaUL.length; i++){
            areaList.push(areaUL[i].children[0].text);
    }
  alert("Area Items : " + areaList.length);
};