第二个选择菜单根据第一个选择菜单更改 [英] Second Select Menu Change Based On First Select Menu

问题描述

我试图建立两个选择菜单，但第二个结果将基于第一个选择。这两个菜单都不需要从数据库中检索数据。这个网页需要两个动作，因此我无法使用PHP来执行它。由于第一次选择，第一个动作是变化的。第二个动作是插入数据库。从网上看，我推荐这样做是为了建立在JavaScript上。阅读别人的帖子让我感到非常困惑，因为它们在某种意义上是不同的。

我想要达到的目标：如果有人选择了Acer品牌，那么只有Model属于宏碁应该出现。 Acer Models：TravelMate，Extensa，Aspire

Apple型号：MacBook，MacBook Air，MacBook Pro $ / $> $ / $>

我不擅长编程，所以请耐心等待。

我的html代码如下所示：

 < tr> 
< td class =LABEL>品牌< / td> 
< td>< select name =Brandclass =LABELid =Brand> 
< option selected =selected>品牌< / option> 
< option value =Acer> Acer< / option> 
< option value =Apple> Apple< / option> 
< / select>< / td> 
< / tr> 
< tr> 
< td class =LABEL>模型< / td> 
< td>< select name =Modelclass =LABELid =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> 
  

如果你可以帮我解决这个问题，那将很棒。提前致谢。

解决方案

这是一个可能的解决方案。我已经改变了你的HTML，所以选项是dinamicaly创建的（更好的解决方案，如果你想以后添加更多的品牌和模型）。

  Acer_models =新阵列（'TravelMate'，'Extensa'，'Aspire'）; 
 Apple_models =新阵列（'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; 
 
 
（i = 0; i< arr.length; i ++）{
 var option = document.createElement（option）; 
 option.text = arr [i]; 
 model.add（option）; 
} 
 
 
 
 
 
 
 
} 
  

以下是jsfiddle： http://jsfiddle.net / 4w8zaywg /

PS Line model.options.length = 1，将确保只有'model'选项存在于更改事件...

I'm trying to build two select menu but the second result will based on the first selection. Both menu do not need to retrieve data from database. This web page requires two actions therefore I'm unable to perform it using PHP. The first action is onchange due to the first selection. The second action is to insert into database. From online, I read recommendation to do this is to build on javascript. Reading through others' post made me very confused as they were different in a sense.

What I want to achieve: If someone selected Acer in Brand, then only Model belonging to Acer should appeared. Same goes to Apple.

Acer Models: TravelMate, Extensa, Aspire
Apple Models: MacBook, MacBook Air, MacBook Pro

I'm not good in programming, so please bear with me. I have not insert any javascript or PHP in this coding.

My html codes shown as below:

          <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>

It would be great if you could help with me this. Thanks in advance.

解决方案

Here is one possible solution. I've changed your HTML, so options are created dinamicaly (better solution, if you want to add more brands and models later).

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);
        }







}

Here is jsfiddle: http://jsfiddle.net/4w8zaywg/

P.S. Line model.options.length=1, will assure that only 'model' option is present on change event...

这篇关于第二个选择菜单根据第一个选择菜单更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！