2016-09-06 10 views
-5

このコードで何が問題になっていますか?私のonchangeイベントがなぜ機能しないのですか?私はすでにたくさん試して、それは私をナッツにしています。助けてください?正確な問題ですJavascript onchangeイベントが自分のコードで機能しない

<!DOCTYPE html> 
<html> 
<head> 
<script type=text/javascript> 
function populate(s1,s2){ 
var s1 = document.getElementById(s1); 
var s2 = document.getElementById(s2); 
s2.innerHTML = ""; 
if(s1.value == "Chevy"){ 
var optionArray ["|", "camaro|Camaro", "corvette|Corvette", 
"impala|Impala"]; 
} 
else if(s1.value=="Dodge"){ 
var optionArray=["|", "avanger|Avanger", "challenger|Challenger", 
"charger|Charger"]; 
} 
else if(s1.value=="Ford"){ 
var optionArray=["|", "mustang|Mustang", "shelby|Shelby"]; 
} 
for(var option in optionArray){ 
var pair=optionArray[option].split("|"); 
var newOption=document.createElement("option"); 
newOption.value=pair[0]; 
newOption.innerHtml=pair[1]; 
s2.options.add(newOption); 
} 
} 
</script> 
</head> 
<body> 
<h2>Choose Your Car</h2> 
<hr /> 
Choose Car Make: 
<select id="slct1" name="slct1" onchange="populate(this.id, 'slct2')"> 
<option value="">Select</option> 
<option value="Chevy">Chevy</option> 
<option value="Dodge">Dodge</option> 
<option value="Ford">Ford</option> 
</select> 
<hr /> 
Choose Car Model: 
<select id="slct2" name="slct2"></select> 
<hr /> 
</body> 
</html> 

誰もが、私はそれに応じて

+3

は 'innerHtml'は' innerHTML' – Li357

+0

と同じではありません、あなたはテキストではなく、オプションのHTMLを設定する必要があります。そして、あなたは本当に配列のforループを使うべきではありません。 – epascarello

+0

コードに構文エラーがあります。ブラウザは、これらのエラーが何であるかを伝えています。 JavaScriptコンソールを見てください。 – David

答えて

0

2つの変更を、それを実行してみましょう...私に指摘してください。 innerHTMLinnerHtmlを変更し、

if(s1.value == "Chevy"){ 
var optionArray ["|", "camaro|Camaro", "corvette|Corvette", 
"impala|Impala"]; 
} 

=符号を割り当てる

+0

が試行されています...まだそれは働いていません...しかし、とにかくおかげです...私はデータベースメソッドを使用するつもりです...私は私のリストがかなり大きくなると考えました –

0

JSFIDDLE

if(s1.value == "Chevy"){ 
var optionArray = ["|", "camaro|Camaro", "corvette|Corvette", 
"impala|Impala"]; 
} 

に上記を修正し、次を試してみてください。

<select id="slct1" name="slct1" onchange="populate(this, 'slct2')"> 

JS:

populate = function(s1,s2) { 
    var s2 = document.getElementById(s2); 
    s2.innerHTML = ""; 
    if(s1.value == "Chevy"){ 
     var optionArray = ["|", "camaro|Camaro", "corvette|Corvette", 
"impala|Impala"]; 
    } 
    else if(s1.value=="Dodge"){ 
     var optionArray=["|", "avanger|Avanger", "challenger|Challenger", 
"charger|Charger"]; 
    } 
    else if(s1.value=="Ford"){ 
     var optionArray=["|", "mustang|Mustang", "shelby|Shelby"]; 
    } 
    for(var option in optionArray){ 
     var pair=optionArray[option].split("|"); 
     var newOption=document.createElement("option"); 
     newOption.value=pair[0]; 
     newOption.innerHTML=pair[1]; 
     s2.options.add(newOption); 
    } 
} 

デモ: https://jsfiddle.net/xkyffr4h/1/

+0

ありがとう...まだ何かが間違っている私は知っていません。仕事はしていない...とにかく感謝4時間をかけて...データベースとAJAXメソッドを使用するつもり...私のオプションリストはかなり考えられるだろう –

関連する問題