Second Select Menu Change On On First Select Menu

Question

Я пытаюсь создать два меню выбора, но второй результат будет основан на первом выборе. Оба меню не нуждаются в извлечении данных из базы данных. Эта веб-страница требует двух действий, поэтому я не могу выполнить ее с помощью PHP. Первое действие - замена в связи с первым выбором. Второе действие - вставить в базу данных. Из онлайн, я прочитал рекомендацию, чтобы сделать это, чтобы построить на javascript. Чтение через чужой пост очень смутило меня, поскольку они в некотором смысле были разными.

Что я хочу достичь: если кто-то выбрал Acer в Бренде, тогда появится только модель, принадлежащая Acer. То же самое касается Apple.

Acer Модели: 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, гарантирует, что в событии изменения присутствует только опция «model» ...