分解大dropdownlist，以避免有一個巨大的功能

Question

我已經在Javascript中創建了一個函數接收一個列表，我必須初始化我的依賴下拉列表所需的所有值。代碼工作正常，問題是現在頁面中的數據太多，並且在函數本身中。有沒有一種方法可以用列表創建單獨的頁面/類，然後通過調用它們將它們包含在函數中？

這裏是我的代碼，這個代碼是依賴dropdownlists：

function dropdownlist(listindex) 
{ 
    //document.formname.departments.options.length = 0; 
    //document.formname.courseName.options.length = 0; 
    //document.formname.courseCode.options.length = 0; 
    //document.formname.subName.options.length = 0; 
    document.formname.subCode.options.length = 0; 

    switch (listindex) 
    { 
      //Faculties 
      //Departments 
      case "Sciences" : 
      document.formname.departments.options[0]=new Option("Select Department",""); 
      document.formname.departments.options[1]=new Option("Animal Sciences","Animal Sciences"); 
      document.formname.departments.options[2]=new Option("Crop Science","Crop Science"); 
      document.formname.departments.options[3]=new Option("Chemistry","Chemistry"); 
      document.formname.departments.options[4]=new Option("Mathematics and Statistics","Mathematics and Statistics"); 
      document.formname.departments.options[5]=new Option("Nature Conservation","Nature Conservation"); 
      document.formname.departments.options[6]=new Option("Environmental Health","Environmental Health"); 
      document.formname.departments.options[7]=new Option("Physics","Physics"); 
      break; 

      case "Humanities" : 
      document.formname.departments.options[0]=new Option("Select Department",""); 
      document.formname.departments.options[1]=new Option("Journalism","Journalism"); 
      document.formname.departments.options[2]=new Option("Educational Studies","Educational Studies"); 
      document.formname.departments.options[3]=new Option("Public Management","Public Management"); 
      document.formname.departments.options[4]=new Option("Mathematics","Mathematics"); 
      document.formname.departments.options[5]=new Option("Law","Law"); 
      document.formname.departments.options[6]=new Option("Public Relations","Public Relations"); 
      document.formname.departments.options[7]=new Option("Applied Languages","Applied Languages"); 
      document.formname.departments.options[8]=new Option("Business Commerce","Business Commerce"); 
      document.formname.departments.options[9]=new Option("Safety and Security Management","Safety and Security Management"); 
      break; 

      case "Engineering And Built Environm" : 
      document.formname.departments.options[0]=new Option("Select Department",""); 
      document.formname.departments.options[1]=new Option("Architecture","Architecture"); 
      document.formname.departments.options[2]=new Option("Building Sciences","Building Sciences"); 
      document.formname.departments.options[3]=new Option("Civil Engineering","Civil Engineering"); 
      document.formname.departments.options[4]=new Option("Chemical and Metallurgical Eng","Chemical and Metallurgical Eng"); 
      document.formname.departments.options[5]=new Option("Eletrical Engineering","Eletrical Engineering"); 
      document.formname.departments.options[6]=new Option("Geomatics","Geomatics"); 
      document.formname.departments.options[7]=new Option("Industrial Engineering","Industrial Engineering"); 
      document.formname.departments.options[8]=new Option("Machanical Engineering","Machanical Engineering"); 
      break; 

      case "Information and Communication " : 
      document.formname.departments.options[0]=new Option("Select Department",""); 
      document.formname.departments.options[1]=new Option("Computer Science","Computer Science"); 
      document.formname.departments.options[2]=new Option("Computer Systems Engineering","Computer Systems Engineering"); 
      document.formname.departments.options[3]=new Option("End User Computing","End User Computing"); 
      document.formname.departments.options[4]=new Option("Informatics","Informatics"); 
      document.formname.departments.options[5]=new Option("Information Technology","Information Technology"); 
      document.formname.departments.options[6]=new Option("Software Engineering","Software Engineering"); 
      document.formname.departments.options[7]=new Option("Web and Multimedia Computing","Web and Multimedia Computing"); 
      break; 

      case "Management Sciences" : 
      document.formname.departments.options[0]=new Option("Select Department",""); 
      document.formname.departments.options[1]=new Option("Hospitality Management","Hospitality Management"); 
      document.formname.departments.options[2]=new Option("Management and Entrepreneurship","Management and Entrepreneurship"); 
      document.formname.departments.options[3]=new Option("Logistics and Sport Management","Logistics and Sport Management"); 
      document.formname.departments.options[4]=new Option("Office Management and Technology","Office Management and Technology"); 
      document.formname.departments.options[5]=new Option("Operations Management","Operations Management"); 
      document.formname.departments.options[6]=new Option("People Management and development","People Management and development"); 
      document.formname.departments.options[7]=new Option("Tourism Management","Tourism Management"); 
      document.formname.departments.options[8]=new Option("Marketing,Logistics and Sport Management","Marketing,Logistics and Sport Management"); 
      document.formname.departments.options[9]=new Option("Office Management Technology","Office Management Technology"); 
      break; 



      //COURSE NAMES UNDER DEPARTMENTS 
      /*****************Faculty of Engineering and the Built Environment***********************/ 
      case "Architecture" : 
      document.formname.courseName.options[0]=new Option("Select Course",""); 
      document.formname.courseName.options[1]=new Option("Professional","Professional"); 
      document.formname.courseName.options[2]=new Option("Architectural Technology","Architectural Technology"); 
      break; 
      case "Building Sciences" : 
      document.formname.courseName.options[0]=new Option("Select Course",""); 
      document.formname.courseName.options[1]=new Option("Building","Building"); 
      document.formname.courseName.options[2]=new Option("Construction Management","Construction Management"); 
      document.formname.courseName.options[3]=new Option("Quantity Surveying","Quantity Surveying"); 
      break; 
      case "Chemical and Metallurgical Eng" : 
      document.formname.courseName.options[0]=new Option("Select Course",""); 
      document.formname.courseName.options[1]=new Option("Chemical","Chemical"); 
      document.formname.courseName.options[2]=new Option("Metallurgy","Metallurgy"); 
      document.formname.courseName.options[3]=new Option("Refractories","Refractories"); 
      break; 
      case "Civil Engineering" : 
      document.formname.courseName.options[0]=new Option("Select Course",""); 
      document.formname.courseName.options[1]=new Option("Civil","Civil"); 
      document.formname.courseName.options[2]=new Option("Construction Management","Construction Management"); 
      document.formname.courseName.options[3]=new Option("Environmental Engineering","Environmental Engineering"); 
      document.formname.courseName.options[4]=new Option("Geotechnical Engineering","Geotechnical Engineering"); 
      document.formname.courseName.options[5]=new Option("Structural Engineering","Structural Engineering"); 
      document.formname.courseName.options[6]=new Option("Transportation Engineering","Transportation Engineering"); 
      document.formname.courseName.options[7]=new Option("Urban Engineering","Urban Engineering"); 
      document.formname.courseName.options[8]=new Option("Water Engineering","Water Engineering"); 
      break; 
      case "Eletrical Engineering" : 
      document.formname.courseName.options[0]=new Option("Select Course",""); 
      document.formname.courseName.options[1]=new Option("Eletrical","Eletrical"); 
      document.formname.courseName.options[2]=new Option("Electronic Engineering","Electronic Engineering"); 
      document.formname.courseName.options[3]=new Option("Power Engineering","Power Engineering"); 
      break; 
      case "Geomatics" : 
      document.formname.courseName.options[0]=new Option("Select Course",""); 
      document.formname.courseName.options[1]=new Option("Surveying","Surveying"); 
      document.formname.courseName.options[2]=new Option("Cartography","Cartography"); 
      break; 
      case "Industrial Engineering" : 
      document.formname.courseName.options[0]=new Option("Select Course",""); 
      document.formname.courseName.options[1]=new Option("Industrial","Industrial"); 
      document.formname.courseName.options[2]=new Option("Technology Management","Technology Management"); 
      break; 
      case "Machanical Engineering" : 
      document.formname.courseName.options[0]=new Option("Select Course",""); 
      document.formname.courseName.options[1]=new Option("Mechanical","Mechanical"); 
      document.formname.courseName.options[2]=new Option("Mechatronics","Mechatronics"); 
      document.formname.courseName.options[3]=new Option("Polymer Technology","Polymer Technology"); 
      document.formname.courseName.options[4]=new Option("Three-Dimension Design","Three-Dimension Design"); 
      break; 

      /******************************COURSE CODES = Faculty of Engineering and the Built Environment****************************************/ 
      case "Professional" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("MTPSSO","MTPSSO"); 
      document.formname.courseCode.options[2]=new Option("BTPS09","BTPS09"); 
      break; 
      case "Architectural Technology" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("MTAD96","MTAD96"); 
      document.formname.courseCode.options[2]=new Option("BTAQ95","BTAQ95"); 
      break; 
      case "Building" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("NDBU04","NDBU04"); 
      break; 
      case "Construction Management" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("BTCU02","BTCU02"); 
      document.formname.courseCode.options[2]=new Option("MTCUSO/MTCU95","MTCUSO/MTCU95"); 
      break; 
      case "Quantity Surveying" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("BTQCE03","BTQCE03"); 
      document.formname.courseCode.options[2]=new Option("MTQSSO/MTQS95","MTQSSO/MTQS95"); 
      break; 
      case "Chemical" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("NDCE03","NDCE03"); 
      document.formname.courseCode.options[2]=new Option("NDCEF0","NDCEF0"); 
      document.formname.courseCode.options[3]=new Option("BTCE02","BTCE02"); 
      document.formname.courseCode.options[4]=new Option("MTCE95","MTCE95"); 
      document.formname.courseCode.options[5]=new Option("DTCE96","DTCE96"); 
      break; 
      case "Metallurgy" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("NDMY03","NDMY03"); 
      document.formname.courseCode.options[2]=new Option("NDMYF0","NDMYF0"); 
      document.formname.courseCode.options[3]=new Option("BTMY02","BTMY02"); 
      document.formname.courseCode.options[4]=new Option("MTMY96","MTMY96"); 
      document.formname.courseCode.options[5]=new Option("DTMY96","DTMY96"); 
      break; 
      case "Refractories" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("BTKR01","BTKR01"); 
      break; 

      case "Civil" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("NDCI03","NDCI03"); 
      document.formname.courseCode.options[2]=new Option("NDCIF0","NDCIF0"); 
      document.formname.courseCode.options[3]=new Option("BTKG02","BTKG02"); 
      document.formname.courseCode.options[4]=new Option("BTOI02","BTOI02"); 
      document.formname.courseCode.options[5]=new Option("BTGO02","BTGO02"); 
      document.formname.courseCode.options[6]=new Option("BTSQ02","BTSQ02"); 
      document.formname.courseCode.options[7]=new Option("BTTO02","BTTO02"); 
      document.formname.courseCode.options[8]=new Option("MTCI95","MTCI95"); 
      document.formname.courseCode.options[9]=new Option("DTCI96","DTCI96"); 
      break; 

      /*****************DEPARTMENTS OF ICT***********************/ 

      case "Computer Science" : 
      document.formname.courseName.options[0]=new Option("Select Course",""); 
      document.formname.courseName.options[1]=new Option("Information Networks","Information Networks"); 
      document.formname.courseName.options[2]=new Option("Computer Science and Data Processing","Computer Science and Data Processing"); 
      document.formname.courseName.options[3]=new Option("Information Technology","Information Technology"); 
      document.formname.courseName.options[3]=new Option("Technical Applications","Technical Applications"); 
      document.formname.courseName.options[4]=new Option("Professional Practise in Information Technology","Professional Practise in Information Technology"); 
      break; 

      /*****************COURSE CODES IN DEPARTMENTS OF ICT*********************************/ 
      case "Information Technology" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("NDIT04/NDIT12","NDIT04/NDIT12"); 
      document.formname.courseCode.options[2]=new Option("NDITF1","NDITF1"); 

      break; 
      case "Information Networks" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("MTINS0","MTINS0"); 
      document.formname.courseCode.options[2]=new Option("MTIN01","MTIN01"); 
      break; 
      case "Computer Science and Data Processing" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("DTIN08","DTIN08"); 
      document.formname.courseCode.options[2]=new Option("DTIL08","DTIL08"); 
      document.formname.courseCode.options[3]=new Option("DTPF08","DTPF08"); 
      break; 
      case "Technical Applications" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("NDIL04/NDIL12","NDIL04/NDIL12"); 
      document.formname.courseCode.options[2]=new Option("BTIL05","BTIL05"); 
      document.formname.courseCode.options[3]=new Option("MTIL95","MTIL95"); 
      break; 

      case "Professional Practise in Information Technology" : 
      document.formname.courseCode.options[0]=new Option("Select Course",""); 
      document.formname.courseCode.options[1]=new Option("BTPF03","BTPF03"); 
      document.formname.courseCode.options[2]=new Option("MTPFS1","MTPFS1"); 
      document.formname.courseCode.options[3]=new Option("MTPF01","MTPF01"); 
      break; 

      //SUBJECTS NAMES IN THE COMPUTER SCIENCE DEPARTMENT...Technical Apps 
      case "NDIL04/NDIL12": 
      document.formname.subName.options[0]=new Option("Select Subject",""); 
      document.formname.subName.options[1]=new Option("Industry Exposure","Industry Exposure"); 
      break; 

      case "Industry Exposure": 
      document.formname.subCode.options[0]=new Option("Select Subject Code",""); 
      document.formname.subCode.options[1]=new Option("IDC30DB","IDC30DB"); 
      break; 

    } 
    return true; 
} 

Answer 1

我敢打賭，你可以做到這一點甚至更短，但它是一個開始：

var sciences = [["...", "..."], ["...", "..."], ["...", "..."],...]; 
var humanities = [["...", "..."], ["...", "..."], ["...", "..."],...]; 
... 
switch (listIndex) { 
    case "Sciences" : 
     for(int i = 0; i < sciences.length; i++) { 
      document.formname.departments.options[i] = new Option(sciences[i][0], sciences[i][1]); 
     } 
     break; 
    case... 
.... 
} 

Answer 2

的基本思路應該是（就像在任何情況下一樣）將重複的代碼移動到一個函數中，如果需要，將數據分開並放在一起。下面的代碼是一個開始，應該比你的短得多。

var departments = { 
     'Sciences': [ '...', '...', '...' ], 
     'Humanities': [ '...', '...', '...' ], 
     ... 
    }, 
    courseNames = { 
     'Sciences': [ '...', '...', '...' ], 
     'Humanities': [ '...', '...', '...' ], 
     ... 
    }, 
    ...; 

function createOptions(items) { 
    options = []; 
    for(var i=0; max=items.length; i<max; ++i) { 
    options.push(new Option(data[i], data[i]); 
    } 
    return options; 
} 

document.formname.departments.options = createOptions(departments); 
document.formname.courseName.options = createOptions(courseName);