ドロップダウンリストのJavascriptコードが正しく動作しない

ドロップダウンリストを作成するために、次のコードを記述しました。 リサーチエリアのリストはうまくいきますが、そのリサーチエリアに対応しています。教師を選択するとX、Yなどのオプションが表示されますは表示されません。私のコードのバグは何ですか？ドロップダウンリストのJavascriptコードが正しく動作しない

<!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 == "Deep Learning") { 
     var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; 
     } 
     if (s1.value == "Big Data") { 
     var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; 
     } 
     if (s1.value == "Cryptography") { 
     var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; 
     } 
     if (s1.value == "Algorithms") { 
     var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; 
     } 
     if (s1.value == "Embedded Systems") { 
     var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; 
     } 
     if (s1.value == "Graphic Design") { 
     var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; 
     } 
     if (s1.value == "Computer Architecture") { 
     var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; 
     } 
     if (s1.value == "Robotics") { 
     var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; 
     } 
     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 Accordingly</h2> 
    <hr/> Choose Research Area: 
    <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Deep Learning">Deep Learning</option> 
    <option value="Big Data">Big Data</option> 
    <option value="Cryptography">Cryptography</option> 
    <option value="Algorithms">Algorithms</option> 
    <option value="Embedded Systems">Embedded Systems</option> 
    <option value="Graphic Design">Graphic Design</option> 
    <option value="Computer Architecture">Computer Architecture</option> 
    <option value="Robotics">Robotics</option> 
    </select> 
    <hr/> Choose Professor: 
    <select id="slct2" name="slct2"></select> 
    <hr /> 

</body> 

</html>

出典

2017-11-13 Varun

'document.getElementbyId'は' document.getElementById'する必要があります –

あなたがタイプミスdocument.getElementbyIdを持っているがdocument.getElementByIdでなければなりません、あなたは関係なく、あなたが最初の1で選択したものを2番目のドロップダウンで同じ値を移入されていません。したがって、これらのif条件

function populate(s1, s2) { 
 
    var s1 = document.getElementById(s1); 
 
    var s2 = document.getElementById(s2); 
 
    s2.innerHTML = ""; 
 
    var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; 
 
    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); 
 
    } 
 
}

<h2>Choose Accordingly</h2> 
 
<hr/> Choose Research Area: 
 
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')"> 
 
    <option value=""></option> 
 
    <option value="Deep Learning">Deep Learning</option> 
 
    <option value="Big Data">Big Data</option> 
 
    <option value="Cryptography">Cryptography</option> 
 
    <option value="Algorithms">Algorithms</option> 
 
    <option value="Embedded Systems">Embedded Systems</option> 
 
    <option value="Graphic Design">Graphic Design</option> 
 
    <option value="Computer Architecture">Computer Architecture</option> 
 
    <option value="Robotics">Robotics</option> 
 
    </select> 
 
<hr/> Choose Professor: 
 
<select id="slct2" name="slct2"></select> 
 
<hr />

出典

2017-11-13 16:42:14

-1

使用... s2.appendChild（newOption）の必要はありません。の代わりに s2.options.add（newOption）;によってを必要

出典

2017-11-13 16:52:37

getElementByIdを大文字Bとによりに変化しました。

function populate(s1, s2) { var s1 = document.getElementById(s1); var s2 = document.getElementById(s2); s2.innerHTML = ""; var option = s1.options[s1.selectedIndex]; var value = option.value; if (value == "Deep Learning") { var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; } if (value == "Big Data") { var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"]; } 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); } }

Choose Research Area: <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')"> <option value=""></option> <option value="Deep Learning">Deep Learning</option> <option value="Big Data">Big Data</option> </select> <hr/> Choose Professor: <select id="slct2" name="slct2"></select>

出典

2017-11-13 17:10:16 wolfhammer

ドロップダウンリストのJavascriptコードが正しく動作しない

答えて

関連する問題