Question

我尝试构建两个选择菜单，但第二个结果将基于第一个选择。两个菜单都不需要从数据库中检索数据。此网页需要两个操作，因此我无法使用PHP执行此操作。由于第一次选择，第一个动作是onchange。第二个操作是插入数据库。从在线，我看到建议这样做是建立在JavaScript上。通过他人阅读＆＃39;帖子让我非常困惑，因为它们在某种意义上是不同的。

我想要实现的目标：如果某人在Brand中选择了Acer，那么只有属于Acer的模型才会出现。同样适用于Apple。

宏碁型号：TravelMate，Extensa，Aspire
Apple型号：MacBook，MacBook Air，MacBook Pro

我的编程不好，所以请耐心等待。我没有在这个编码中插入任何javascript或PHP。

我的html代码如下所示：

          <tr>
        <td class="LABEL">Brand</td>
        <td><select name="Brand" class="LABEL" id="Brand">
          <option selected="selected">Brand</option>
          <option value="Acer">Acer</option>
          <option value="Apple">Apple</option>
      </select></td>
      </tr>       
      <tr>
        <td class="LABEL">Model</td>
        <td><select name="Model" class="LABEL" id="Model">
          <option selected="selected">Model</option>

          <option value="TravelMate">TravelMate</option>
          <option value="Extensa">Extensa</option>
          <option value="Aspire">Aspire</option>

          <option value="MacBook">MacBook</option>
          <option value="MacBook Air">MacBook Air</option>
          <option value="MacBook Pro">MacBook Pro</option>

        </select></td>
      </tr>

如果你可以帮助我这将是很好的。提前谢谢。

Answer 1

这是一种可能的解决方案。我已经更改了您的HTML，因此可以创建选项（更好的解决方案，如果您想在以后添加更多品牌和型号）。

Acer_models=new Array('TravelMate','Extensa','Aspire');
Apple_models=new Array('MacBook', 'MacBook Air', 'MacBook Pro');


function show_models(){

    brand=document.getElementById('Brand');
model=document.getElementById('Model');
 model.options.length = 1;
 selected=brand.options[brand.selectedIndex].value;
    if(selected=="Acer") {
        arr=Acer_models;
    }
    else if(selected=="Apple") {
        arr=Apple_models;
    }

    for(i=0;i<arr.length;i++) {
var option = document.createElement("option");
option.text = arr[i];
model.add(option);
        }







}

这是jsfiddle：http://jsfiddle.net/4w8zaywg/

P.S。 line model.options.length = 1，将确保只有＆＃39; model＆＃39;变更事件中存在选项......

第二个选择菜单更改基于首选菜单

1 个答案: