アレイの選択肢を持つドロップダウンタブを変更する

Question

配列を使用して複数のドロップダウンタブを作成したい場合、特定のドロップダウンタブで他のドロップダウンタブの表示を変更する必要があります。だから私はifステートメントを使用して配列を設定します。しかし、それは動作していないようで、私はそれがちょうどやった方法で、基本的にそのようにプログラムすることはできませんか、またはiveがどこかでばかげたミスを犯したかどうかはわかりません。

これは私が

var ticketAmount_ = document.getElementById("ticketAmount"); 
var options = ["1", "2", "3", "4"]; 

for (var i = 0; i < options.length; i++) { 
var opt = options [i]; 
var element = document.createElement("option"); 
element.textContent = opt; 
element.value = opt; 
ticketAmount_.appendChild(element); 
; 
} 
var movieName = function() { 
document.getElementById('movieName').options.length = 0; 
if (document.getElementById("ticketAmount").value == 1) { 
var movieSelection1 = document.getElementById("movieName"); 
var options = ["A", "B", "C", "D"]; 

for (var i = 0; i < options.length; i++) { 
    var opt = options [i]; 
    var element = document.createElement("option"); 
    element.textContent = opt; 
    element.value = opt; 
    movieSelection1.appendChild(element); 

} 
} 
else if 
(document.getElementById("ticketAmount").value == 2) { 
var movieSelection2 = document.getElementById("movieName"); 
var options = ["E", "F", "G", "H"]; 

for (var i = 0; i < options.length; i++) { 
    var opt = options [i]; 
    var element = document.createElement("option"); 
    element.textContent = opt; 
    element.value = opt; 
    movieSelection2.appendChild(element); 
    ; 
} 
} 
}; 

を持っていると私はwindow.onloadに起動するように設定MOVIENAME機能を持っているコードです。

これは実際には可能ですか？

これは大きな質問に分類されていない場合、申し訳ありませんが何らかの理由で私の簡単な質問は投票されていますが、ちょっと私たちはどこかで学ぶ必要があります。

Answer 1

本当にロード時に実行してもよろしいですか？最初の選択の変更に対応していませんか？

私はあなたがこのような何か後にしていると思う：あなたのjsのため

<div> 
    <select id='ticketAmount' onchange="movieName()"></select> 
    <select id='movieName'></select> 
</div> 

、その後：私は2番目のオプションをクリアしてきました

var ticketAmount_ = document.getElementById("ticketAmount"); 
var options = ["1", "2", "3", "4"]; 

for (var i = 0; i < options.length; i++) { 
    var opt = options [i]; 
    var element = document.createElement("option"); 
    element.textContent = opt; 
    element.value = opt; 
    ticketAmount_.appendChild(element); 
    ; 
} 
var movieName = function() { 
document.getElementById('movieName').options.length = 0; 
if (document.getElementById("ticketAmount").value == 1) { 
    var movieSelection1 = document.getElementById("movieName"); 
    var options = ["A", "B", "C", "D"]; 

    for (var i = 0; i < options.length; i++) { 
     var opt = options [i]; 
     var element = document.createElement("option"); 
     element.textContent = opt; 
     element.value = opt; 
     movieSelection1.appendChild(element); 

    } 
} 
else if 
(document.getElementById("ticketAmount").value == 2) { 
    var movieSelection2 = document.getElementById("movieName"); 
    var options = ["E", "F", "G", "H"]; 

    for (var i = 0; i < options.length; i++) { 
     var opt = options [i]; 
     var element = document.createElement("option"); 
     element.textContent = opt; 
     element.value = opt; 
     movieSelection2.appendChild(element); 
     ; 
    } 
} 
}; 

注「オプションを選択します。長さ= 0 'になります。

あなたはJSに新しいしている言及したので、私は私はあなたが自分自身の努力/コードを保存するために調べることができ、他の概念のいくつかを言及しようと思いました：

• の代わりに、Switchステートメントを使用して、 if/else
• あなた自身を繰り返してはならない（DRY）。スイッチの場合/他を使用しているかどうか、次のことができるようにする必要があります
  1. クリアしたオプション
  2. あなたのスイッチ内の適切なオプションの配列を決定
  3. 外/スイッチの後（または/他の場合）を追加選択する要素は、（両方のオプションのために繰り返されている「for」ループ）