Jquery功能不能與選擇形式

我使用以下選擇的形式和功能首先選擇運輸類型，我想在第一階段根據我的選擇在第二種形式的汽車或摩托車清單。我會很感激，如果你可以讓我知道爲什麼我的功能無法正常工作和我所缺少的Jquery功能不能與選擇形式

<!doctype html> 
<html> 
<body> 
<select id="transport" name="transport"> 
<option value="choose">Please choose a type</option> 
<option value="cars">Cars</option> 
<option value="motorcycles">Motorcycles</option> 
</select> 
<select id="model" name="model"> 
<option>Please choose a type first</option> 
</select> 

<input id="submit" type="submit" value="submit" /> 
</body> 

<script> 
(function(){ 
    var type = document.getElementById('transport'); 
    var model = document.getElementById('model'); 
    var cars = { 
     Alfa_Romeo: '4 C Spider', 
     Aston_Martin: 'V12 Vantage', 
     Audi: 'A4 Allroad', 
     Ford: 'Focus' 
    }; 
    var motorcycles = { 
     Yamaha: 'YZF-R6', 
     Kawasaki: 'Versys 650 LT', 
     Suzuki: 'Boulevard C50', 
     Honda: 'Super Cub C100' 
    }; 

    addEvent(type, 'change', function() { 
     if (this.value === 'choose'){ 
      model.innerHTML = '<option>Please choose a type first</option>'; 
      return;                 
     } 
     var models = getModels(this.value); 

     var options = '<option>Please choose a model</option>'; 
     for (var key in models){ 
      options += '<option value="' + key + '">' + models[key] + '</option>'; 
     }                    
     model.innerHTML = options; 
    }); 

    function getModels(transport) { 
     if (transport === 'cars') { 
      return cars; 
     } else if (transport === 'motorcycles'){ 
      return motorcycles;                      
     }                  
    }  
}()); 
</script>

來源

2016-12-27 user3105772

什麼是'的addEvent（）'？該功能在哪裏定義？ – David

也沒有提及在瀏覽器控制檯中拋出的錯誤 – charlietfl

@David，謝謝你soo很多David。 addEvent不起作用。它應該被替換爲$（「＃transport」）。改變（function（）{ if（this.value ==='choose'）{ model.innerHTML =''; return; – user3105772

使用addEventListener。檢查這個工作片斷

(function(){ 
 
var type = document.getElementById('transport'); 
 
var model = document.getElementById('model'); 
 
var cars = { 
 
Alfa_Romeo: '4 C Spider', 
 
Aston_Martin: 'V12 Vantage', 
 
Audi: 'A4 Allroad', 
 
Ford: 'Focus' 
 
}; 
 
var motorcycles = { 
 
Yamaha: 'YZF-R6', 
 
Kawasaki: 'Versys 650 LT', 
 
Suzuki: 'Boulevard C50', 
 
Honda: 'Super Cub C100' 
 
}; 
 

 
type.addEventListener('change', function() { 
 
if (this.value === 'choose'){ 
 
model.innerHTML = '<option>Please choose a type first</option>'; 
 
return;                 
 
} 
 
var models = getModels(this.value); 
 

 
var options = '<option>Please choose a model</option>'; 
 
for (var key in models){ 
 
options += '<option value="' + key + '">' + models[key] + '</option>'; 
 
}                    
 
model.innerHTML = options; 
 
}); 
 
function getModels(transport) { 
 
if (transport === 'cars') 
 
{ 
 
return cars; 
 
} 
 
else if (transport === 'motorcycles'){ 
 
return motorcycles;                      
 
}                  
 
}  
 
}());

<select id="transport" name="transport"> 
 
<option value="choose">Please choose a type</option> 
 
<option value="cars">Cars</option> 
 
<option value="motorcycles">Motorcycles</option> 
 
</select> 
 
<select id="model" name="model"> 
 
<option>Please choose a type first</option> 
 
</select> 
 

 
<input id="submit" type="submit" value="submit" />

來源

2016-12-27 03:19:44 TheUknown

Jquery功能不能與選擇形式

回答

相關問題