Я новичок в jQuery и Javascript. Мне нужно создать выпадающий элемент select- > с помощью jQuery/Javascripting на стороне клиента. Эти выпадающие списки имеют свои параметры из массива, и мне нужно создать столько падений, сколько элементов массива. Пожалуйста, ниже двух написанных функций, они не рисуют много падений, но только один.
<script type="text/javascript">
// 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 <ol>
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('<ul></ul>').find('ul');
for(i=0; i<=fieldListItems.length-1; i++){
list.append('<li>');
list.append(getDropDownList(fieldListItems[i],fieldListItems[i],fieldListItems));
list.append('</li>');
//list.append('<li>'+fieldListItems[i]+'</li>');
//alert(i);
}
}
}
function getDropDownList(name, id, optionList) {
var combo = $("<select></select>").attr("name", name);
$.each(optionList, function (i, el) {
combo.append("<option>" + el + "</option>");
});
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"), "");
}
</script>
это вызов функции: getFormListItems (inputFieldList); inputFieldList может содержать Apple, Orange, Banana, Mango
Пожалуйста, помогите благодаря Waqas