Dynamically generated select option dropdown menu using JavaScript

Question

This is the select menu I am going to create. But as you can see there are static data. As I actually have bunch of JSON data passed from backend servlet, so there will be hundreds of items for options. I want something like dynamically generate option menu for my dropdown box.

<select id="brand-select" name="brand">
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <option value="lexus">Lexus</option>
</select>

This is my tryout and it doesn't work:

HTML:

<select id="brand-select" name="brand" onChange="createOptions">
    <option value="none"></option>
</select>

JavaScript:

//Asssume I have jsonDataForBrands ready, and it contains 100s items
function createOptions() {
    for (var fieldIndex in jsonDataForBrands) {
        html += '<option value=' + fieldIndex  + '>' + jsonDataForBrands[field].title + '</option>';
}

please ignore json stuff for now, because i have already extracted all data, jsonDataForBrands[1].title = bmw jsonDataForBrands[2].title=VW jsonDataForBrands[3].title=Benz .. etc.. i just need this branddata populated to 'optionmenu' for dropdown box, cheers — sefirosu
– sefirosu, Commented May 22, 2014 at 9:54
not really...i dont think it s the same type of question.. my things are actually quite simple...in one word... i need a function() to create 100s options for my select drop down box...and the data are all there already in jsonDataForBrands[1].title ,jsonDataForBrands[2].title, jsonDataForBrands[3].title....etc... — sefirosu
– sefirosu, Commented May 22, 2014 at 9:58
so are these jsons stored in an array..? You need to provide more info about the structure of data you have.. — T J
– T J, Commented May 22, 2014 at 10:02

Peter Mortensen · Accepted Answer · 2015-10-20 23:40:05Z

4

I figured it out by myself...

HTML:

<select id="brand-select" name="brand">
                </select>

JavaScript:

function creatBrandOptions(){
    for (var field in jsonDataForBrands) {
         $('<option value="'+ jsonDataForBrands[field].name +'">' + jsonDataForBrands[field].title + '</option>').appendTo('#brand-select');
    }
}

I did an Ajax call to retrieve JSON data from my servlet and then creatBrandOptions() in the same function BTW...

edited Oct 20, 2015 at 23:40

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 22, 2014 at 10:21

sefirosu

2,65811 gold badges46 silver badges74 bronze badges

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

Comments

Eamonn Gormley · Accepted Answer · 2015-04-15 19:30:32Z

1

You beat me to it. Here's a complete simplified example of adding options to a select using jquery:

<html>
<head>
<script src="jquery.js"></script>

</head>
<body>
<button id="populateMenu" >Populate menu</button>

<select id="mySelect">


</select>

<script>
    var optionValues= [[1,"first"],[2,"second"]];

    jQuery("#populateMenu").click( function () {
        for (var i=0;i<optionValues.length;i++){
            jQuery('#mySelect').append(jQuery("<option></option>").val(optionValues[i][0]).text(optionValues[i][1]))
        }
    });
</script>
</body>
</html>

answered Apr 15, 2015 at 19:30

Eamonn Gormley

2,4564 gold badges22 silver badges21 bronze badges

1 Comment

Stephen Ngethe Over a year ago

Thanks for this to avoid population on the menu with previous option when user changes option add below before your FOR statement var $select = $('#mySelect'); $select.find('option').remove();

bitfhacker · Accepted Answer · 2014-05-22 10:31:21Z

0

This example uses jQuery. See if it suits you:

function createOptions( jsonDataForBrands ) {
   $('#brand-select option').remove(); // first remove all options
   for (var i=0; i<jsonDataForBrands.length; i++)

   for (var fieldIndex in jsonDataForBrands) { // then populatem them
      $('#brand-select').append($("<option></option>").attr("value", fieldIndex  ).text(jsonDataForBrands[field].title) );
}

answered May 22, 2014 at 10:31

bitfhacker

2921 silver badge14 bronze badges

Collectives™ on Stack Overflow

Dynamically generated select option dropdown menu using JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related