Jquery関数が選択フォームで機能していない

私は次の選択フォームと関数を使用してトランスポートタイプを選択しています。最初のステージで自分の選択に応じて2番目のフォームに車やバイクのリストを表示したい。あなたは私の機能が動作していないと私は使用addEventListener 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

@Davidのブラウザコンソール – charlietfl

にも間違いはありません。 addEventが機能していません。 $（ "＃transport"）に置き換えてください。 { if（this.value === 'choose'）{ モデル.innerHTML = ''; return; – user3105772

をしないのですなぜ私に教えて頂ければ本当に感謝します。この作業スニペット

(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関数が選択フォームで機能していない

答えて

関連する問題