我可以在開關內放置一個開關嗎？

Question

我有一班到期的任務，我非常困惑。我自己完成了完整的任務，但這一點讓我感到滿意。

基本上我有它，所以你點擊第一個藝術家，然後跟隨到場地（取決於藝術家），然後根據場地它流向日期，然後根據它流向票的日期金額和票價。

到目前爲止，我有這樣的：

function fillVenue() { 

    //retrieves index of selected artist and target element to be populated 
    var artist = document.getElementById("artist"); 
    var venue = document.getElementById("venue"); 
    var date = document.getElementById("date"); 
    var ticket = document.getElementById("tickets"); 
    var cost = document.getElementById("cost"); 

    // clears data from each category 
    venue.options.length = 0; 
    date.options.length = 0; 
    ticket.options.length = 0; 
    cost.options.length = 0; 

    // clearing event 
    venue.onchange = null; 

    // Collect and Calculate Total 
    function costTotal() { 
     if (ticket.selectedIndex != 0 && cost.selectedIndex != 0) { 
      var costTotal  = document.getElementById("costTotal"); 
      var ticketCount  = ticket.value; 
      var costAmount  = (cost.value).substr(1); 
      costTotal.value = " £" + ticketCount * costAmount; 
     } 
    } 
    ticket.onchange = costTotal; 
    cost.onchange = costTotal; 


    switch (artist.selectedIndex) { 
     case 0: 
     // list begins 
     // allows user to select venue 
      var venueList = ["Select Venue"]; 

     // allows user to select date 
      var dateList = ["Select Date"]; 

     // allows user to select ticket amount  
      var ticketList = ["Select Tickets"]; 

     // allows user to select price of ticket 
      var costList = ["Select Price"]; 

     // fills each category 
      fillList(venue, venueList); 
      fillList(date, dateList); 
      fillList(ticket, ticketList); 
      fillList(cost, costList); 
      break; 

     case 1: 
      // madonna 

     // allows user to select venue 
      var venueList = ["Select Venue", "London"]; 

     // allows user to select date 
     var dateList = ["Select Date", "17th July", "18th July"]; 

     // allows user to select ticket amount 
     var ticketList = ["Select Tickets", "1", "2", "3", "4", "5", "6"]; 

     // allows user to select price of ticket 
      var costList = ["Select Price", "£30", "£45", "£70"]; 

     // fills each category 
      fillList(venue, venueList); 
      fillList(date, dateList); 
      fillList(ticket, ticketList); 
      fillList(cost, costList); 
      break; 

     case 2: 
      //Rod Stewart 


     // allows user to select venue 
     var venueList = ["Select Venue", "Manchester", "Glasgow"]; 

     // allows user to select date 
     var dateList = ["Select Date"] 

     // allows user to select ticket amount 
     var ticketList = ["Select Tickets", "1", "2", "3", "4", "5", "6"]; 

     // allows user to select price of ticket 
     var costList = ["Select Price", "£30", "£45", "£70"]; 

     //fills each category 
      fillList(venue, venueList); 
      fillList(date, dateList); 
      fillList(ticket, ticketList); 
      fillList(cost, costList); 

      // onchange event - selected Rod Stewart 
      venue.onchange = function() { 
       var dateList; 
       switch(venue.selectedIndex) { 
        case 0: dateList = ["Select Date"]; break; 
        case 1: dateList = ["Select Date", "18th July", "20th July"]; break; 
        case 2: dateList = ["Select Date", "22nd July", "23rd July"]; break; 
       } 
       fillList(date, dateList); 
      } 
      break; 

     case 3: 
      //Guns and Roses 
      var venueList = ["Select Venue", "London"]; 
      var dateList = ["Select Date", "10th July"]; 
      var ticketList = ["Select Tickets", "1", "2", "3", "4", "5", "6"]; 
      var costList = ["Select Price", "£88"]; 
      fillList(venue, venueList); 
      fillList(date, dateList); 
      fillList(ticket, ticketList); 
      fillList(cost, costList); 
      break; 

     case 4: 
      // Oasis 
      var venueList = ["Select Venue", "London", "Glasgow", "Nottingham"]; 
      var dateList = ["Select Date"]; 
      var ticketList = ["Select Tickets", "1", "2", "3", "4", "5", "6"]; 
      var costList = ["Select Price"]; 

      fillList(venue, venueList); 
      fillList(date, dateList); 
      fillList(ticket, ticketList); 
      fillList(cost, costList); 


      venue.onchange = function () { 
       var dateList; 
       switch(venue.selectedIndex) { 
        case 0: dateList = ["Select Date"]; break; 
        case 1: dateList = ["Select Date", "23rd July", "24th July"]; break ; 
        case 2: dateList = ["Select Date", "21st July"]; break; 
        case 3: dateList = ["Select Date", "18th July", "19th July"]; break; 
       } 

      cost.onchange = function () { 
       var costList; 
       switch(cost) { 
        case 0: costList = ["Select Price"]; 
        case 1: costList = ["Select Price", "£45", "£60"]; 
        case 2: costList = ["Select Price", "£45", "£65"]; 
        case 3: costList = ["Select Price", "£25", "£45", "£65"]; 
       } 
      } 
       fillList(date, dateList); 
       fillList(cost, costList); 
      } 
      break; 


     case 5: 
      //Beyonce 
      var venueList = ["Select Venue", "Glasgow", "Manchester", "Birmingham", "London"]; 
      var dateList = ["Select Date"]; 
      var ticketList = ["Select Tickets", "1", "2", "3", "4", "5", "6"]; 
      var costList = ["Select Price"]; 
      fillList(venue, venueList); 
      fillList(date, dateList); 
      fillList(ticket, ticketList); 
      fillList(cost, costList); 
      break; 
    } 
} 

function fillList(list,items) { 
    list.options.length = 0; 
    for (var i = 0; i < items.length; i++) { 
     var option = new Option(items[i]); 
     list.options[i] = option; 
    } 
} 

他們完整的代碼工作達到了「綠洲」下拉。日期和場地沒有加起來。事實上，價格只停留在「選擇價格」，並沒有價格出現。

我在考慮添加一個IF語句，但我不太確定這是否是可能的b）一個好主意。

在此先感謝。

Answer 1

a）可以將開關置於開關內部。爲什麼不應該呢？

switch (something) { 
    case 1: 
     switch (something else) { 
      case "A": 
       // do it 
       break; 
      case "B": 
       // do other things 
       break; 
      default: 
       // maybe do this or that 
       break; 
     } 
     break; 
    case 2: 
     // anything else 
     break 
    default: 
     // whatever 
     break 
} 

b）中if內部case s是也是可能的。

c）您的完整結構看起來錯了......您似乎在每種情況下都做了不同的事情，只是具有不同參數的同一事物。如果是這樣，不要使用switch/case或if/else，而是創建一個接受參數並相應採取行動的函數。它被稱爲DRY：「不要重複自己」。不要兩次或三次寫任何代碼。如果你需要，那很明顯屬於某個函數的代碼。

以另一種格式存儲數據。例如多維數組。 JavaScript對象。或者儘可能使用數據庫 - 畢竟這是他們的目標。