2017-11-11 103 views
0

我有多個下拉選項卡,我想通過使用數組填充,我想某些下拉選項卡導致更改其他下拉選項卡將顯示什麼。所以我使用if語句來設置數組。但它似乎並沒有工作,我不知道是否因爲他們的方式,我只是做了它,基本上不能這樣編程,或者如果我在某個地方犯了一個愚蠢的錯誤。更改下拉選項卡與數組的選擇

這是我的代碼有

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); 
    ; 
} 
} 
}; 

有和我的movieName功能設定爲開始在window.onload。

這實際上有可能嗎?

我是JavaScript新手,所以很抱歉,如果這不是一個很好的問題,出於某種原因,我的簡單問題被拒絕了,但嘿,我們都需要在某處學習。

回答

0

您確定要在負載下運行嗎?而不是爲了響應第一次選擇的變化?

我覺得你這樣的事情之後是:

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

,然後你的JS:

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)。無論是使用的if/else開關的,你應該能夠:
    1. 清除選項
    2. 交換機內確定合適的選項數組
    3. 外面/開關後(或的if/else)添加元素的選擇(在「for」循環您已經重複這兩個選項)
+0

我想無論是,無論是在負載或選擇運行。我不知道如何真正設置它,這就是爲什麼我設置它,與onload。 1問題我雖然正在獲取下拉框來顯示旁邊的名稱下拉框被稱爲。 我已經改變了你略微代碼 ​​票額:​​<選擇的id = 'ticketAmount' 的onchange = 「的movieName()」>​​電影名稱: <選擇的id = '的movieName'> 但我只能拿到Dropbox旁邊的門票數量,而不是電影名稱,如果你可以擺脫一些燈光,將不勝感激 – kmce

+0

太棒了!如果這對你有幫助,請接受答案。你最後選擇的問題是它不在​​我想。看看這個codePen:https://codepen.io/morganisbatman/pen/xPqypx –

相關問題