Создание выпадающего меню с помощью javascript

Я новичок в jQuery и Javascript. Мне нужно создать выпадающий элемент select-> с помощью jQuery / Javascripting на стороне клиента. Эти выпадающие списки имеют свои параметры из массива, и мне нужно создать столько падений, сколько элементов массива. Пожалуйста, ниже двух написанных функций, они не рисуют много падений, но только один.

 // program inputs var format1Fields = ",RepID,RetailOutlet,Address,Information,City,State,ZipCode, Demographic,Bullet,Date,Note1,Note2,Note3,Note4,Note5,AssignTask1,AssignTask2,AssignTask3,AssignTask4,LiquorPresence,PhotoLink1,Description1,PhotoLink2,Description2,PhotoLink3,Description3,PhotoLink4,Description4,PhotoLink5,Description5,PhotoLink6,Description6,PhotoLink7,Description7,PhotoLink8,Description8,PhotoLink9,Description9,PhotoLink10,Description10,PhotoLink11,Description11,PhotoLink12,Description12,Videolink1,Videodescription1,Videolink2,Videodescription2,Videolink3,Videodescription3,Videolink4,Videodescription4,POSInstalled1, POSQuantity1,POSInstalled2,POSQuantity2,POSInstalled3,POSQuantity3,POSInstalled4,POSQuantity4,POSInstalled5,POSQuantity5, POSInstalled6,POSQuantity6,POSInstalled7,POSQuantity7,POSInstalled8,POSQuantity8,POSInstalled9,POSQuantity9,POSInstalled10, POSQuantity10,POSInstalled11,POSQuantity11,POSInstalled12,POSQuantity12,Project,Visit,"; var outputFieldsString = "date visited,Mapping link,Date,RepID,Project,RetailOutLet,Address,City,State,Information,Demographic,Bullet,Note1,Note2,Note3,Note4,Note5,AssignTask1,AssignTask2,Assigntask3,AssignTask4,LiquorPresence,PhotoLink1,Picture01,Description1,PhotoLink2,Picture02,Description2,PhotoLink3,Picture03,Description3,PhotoLink4,Picture04,Description4,PhotoLink5,Picture05,Description5,PhotoLink6,Picture06,Description6,PhotoLink7,Picture07,Description7,PhotoLink8,Picture08,Description8,PosInstalled1,MC Cold Box Sticker,PosInstalled2,MC Poster 12 X 18,PosInstalled3,MC Poster 18 X 24,PosInstalled4,MC Poster 24 X 36,PosInstalled5,MC Case Cards,PosInstalled6,MC Standees,PosInstalled7,GM Poster 11 X 17,PosInstalled8,GM Poster 18 X 24,PosInstalled9,GM Recipe Table Tent,Photolink9,Description9,Photolink10,Description10,Photolink11,Description11,Photolink12,POSInstalled10,GM Shelf talker,POSInstalled11,GM Case Cards,POSInstalled12,GM Standees,Picture09,Picture10,Picture11,Picture12,Description12"; var outputDelimiter = ","; var inputFieldList = new Array(); var outputFieldList = new Array(); $(document).ready(function(){ //$('#inputfields').val(trimOnSides(format1Fields.replace(' /g',''),",")); $('#inputfields').val(trimOnSides(format1Fields,",")); // start mapping click event $('#start_mapping').click(function(){ var inputFieldString = $('#inputfields').val(); var inputDelimiter = $('#delimiter option:selected').val(); // input field validation if(inputFieldString == ""){ alert("Please provide Input Fields header line having delimeter to identify the field names!"); $('#inputfields').focus(); return false; } // delimiter validation if(inputDelimiter == "0"){ alert("Please select the correct delimiter that is matches with the seperating delimiter of the Input Fields!"); return false; } // Load input fields item array inputFieldList = getFieldsList(inputFieldString,inputDelimiter); if(inputFieldList.length==0){ alert("Problem transforming Input Field data into list of items for mapping"); return false; } // Load output fields item array outputFieldList = getFieldsList(outputFieldsString,outputDelimiter); if(outputFieldList.length==0){ alert("Problem transforming Output Field data into list of items for mapping"); return false; } // print field list item in HTML 
    getFormListItems(inputFieldList); //getDropDownList('waqas','aiseha',inputFieldList); }); }); // ###### HELPER FUNCTIONS ####### // helper to generate form of drop down function getFormListItems(fieldListItems){ if((fieldListItems instanceof Array) && (fieldListItems.length>0)){ var list = $('#mappingitems').append('
      ').find('ul'); for(i=0; i<=fieldListItems.length-1; i++){ list.append('
    • '); list.append(getDropDownList(fieldListItems[i],fieldListItems[i],fieldListItems)); list.append('
    • '); //list.append('
    • '+fieldListItems[i]+'
    • '); //alert(i); } } } function getDropDownList(name, id, optionList) { var combo = $("").attr("name", name); $.each(optionList, function (i, el) { combo.append("" + el + ""); }); return combo; // OR //$("#SELECTOR").append(combo); } // helper split based string array generators function getFieldsList(fieldsString, delimiter){ var returnList = new Array(); //alert(fieldsString); // validating the arguments and their data type if((fieldsString.length > 0) && (delimiter.length>0)){ returnList = fieldsString.split(delimiter); return returnList; }else{ alert('Problem in function arguments'); } } // helper string functions function trimOnSides(str, chars) { return ltrim(rtrim(str, chars), chars); } function ltrim(str, chars) { chars = chars || "\\s"; return str.replace(new RegExp("^[" + chars + "]+", "g"), ""); } function rtrim(str, chars) { chars = chars || "\\s"; return str.replace(new RegExp("[" + chars + "]+$", "g"), ""); }

    это вызов функции: getFormListItems (inputFieldList); inputFieldList может содержать Apple, Orange, Banana, Mango

    Пожалуйста, помогите спасибо Waqas

    Это создаст падение на лету:

     function getDropDownList(name, id, optionList) { var combo = $("").attr("id", id).attr("name", name); $.each(optionList, function (i, el) { combo.append(""); }); return combo; // OR $("#SELECTOR").append(combo); }