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功能不能与选择形式

回答

相关问题