Creating dropdown <select><option> elements with javascript

Question

I am new to jQuery and Javascript. I have to create select->option drop down control with client side jQuery/Javascripting. These drop downs are having their options from array and i have to create as many drop down as the array items. Please below two functions written, they are not drawing many drop downs but only one.

<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>

this is the call to the function: getFormListItems(inputFieldList); inputFieldList can contain Apple, Orange, Banana, Mango

Please help thanks Waqas

Try this: var list = $('#mappingitems').append('<ul></ul>'); drop the find() off the end. — Sam
– Sam, Commented Oct 25, 2011 at 20:26
same problem with removed find() is it that when returned object (combo) is appended within li has been concatenated and getting converted to string? I might be wrong in my assessment. :( — Wikki
– Wikki, Commented Oct 25, 2011 at 20:29
Have you tried it using my version of the getDropDownList() function? — Sam
– Sam, Commented Oct 25, 2011 at 21:32
yes, i am used your given funcion. and i updated the entire script block. — Wikki
– Wikki, Commented Oct 26, 2011 at 12:55

Sam · Accepted Answer · 2011-10-25 20:20:21Z

28

This will create the drop downs on the fly:

function getDropDownList(name, id, optionList) {
    var combo = $("<select></select>").attr("id", id).attr("name", name);

    $.each(optionList, function (i, el) {
        combo.append("<option>" + el + "</option>");
    });

    return combo;
    // OR
    $("#SELECTOR").append(combo);
}

edited Oct 25, 2011 at 20:20

answered Oct 25, 2011 at 20:13

Sam

15.8k26 gold badges89 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wikki Over a year ago

this statement with concatenated append is writing [object Object] in each line of <li> list.append('<li>'+getDropDownList(fieldListItems[i],fieldListItems[i],fieldListItems)+'</li>'); But if i remove '<li>' and call function only list.append(getDropDownList(fieldListItems[i],fieldListItems[i],fieldListItems)); then i have the drop downs appearing, but i lose formatted li. is there something i have to do with concatenation? thanks

Sam Over a year ago

@Wikki - I am not following you on the above comment??

Sam Over a year ago

@Wikki - See my comment on your question above.

Collectives™ on Stack Overflow

Creating dropdown <select><option> elements with javascript

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related