Cannot dynamically create select with its options

Question

I tried to dynamically create a div with a select input inside but it turns out that there is an empty div with noting.

As you can see, $eduRow is a div that used as a container. Trying to solve it in many ways but still not working(always came up with an empty div).

I have a clicking button that will dynamically create these select stuff after click.

Here is the function that's written inside document ready function.

$("#addMoreEdu").on('click', function() {

  var $eduRow = $("#edu-row");


  var select = $('<select />', {
    'class': 'selectoption'
  });


  $(select).append($('<option value="" disabled selected>Degree option</option>'));
  $(select).append($('<option value="1">High School</option>'))
  $(select).append($('<option value="2">College</option>'))
  $(select).append($('<option value="3">Bachelors degree</option>'))

  var div = $('<div />', {
    'class': 'input-field col s12 m4 l4'
  });

  $(div).append(select)

  $eduRow.append(div);

  $eduRow.append('<div class="input-field col s12 m4 l8"><span class="fieldLabel"> Institutes Name</span><input placeholder="Institutes Name" id="IntsName" type="text" /></div>');
});

Another weird thing is that the second append works fine. I think there must be some problem with select :\ Any ideas?

NOTE: I have my code up herecodepen if you can take a look at Educational Background section.

disabledselected

gcampbell
– gcampbell

2016-07-25 19:41:00 +00:00
Commented Jul 25, 2016 at 19:41 — gcampbell
– gcampbell, Commented Jul 25, 2016 at 19:41

Rich Linnell · Accepted Answer · 2016-07-25 19:47:49Z

1

I have ran this code in a blank project and it works. The only change I made was to wrap your code in a $(document).ready(function () { YOUR CODE HERE }); construct. I would suggest you may have another issue either with your selector, or with your script inclusion for jQuery.

try putting a debugger; line in and running with the debug tools going (F12)

answered Jul 25, 2016 at 19:47

Rich Linnell

9935 silver badges14 bronze badges

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

9 Comments

Bo W Over a year ago

I have update and add the whole code of the function.

Rich Linnell Over a year ago

you will still need the document ready construct. See this fiddle : jsfiddle.net/linskin/d8fdpqsd/1

Bo W Over a year ago

I have already put that function into the document ready but it still not working.

Rich Linnell Over a year ago

did you check out the fiddle? It's working in there and the code is the same as yours (but I did use $("#addMoreEdu").on('click', function() { rather than the click bind.

Bo W Over a year ago

It seems to be working fine on fiddle but I have no idea why it is not in my code becauseI have your code copy and paste. Is it possible if something wrong with css or js framework?

|

Marko Mackic · Accepted Answer · 2016-07-25 19:47:33Z

So you have to wait for document to load and then define your elements as in HTML with opening and closing tag, and specify attributes in opening tag :

I suppose you have this html :

<div id="edu-row">

</div>

JavaScript should like this :

 $(document).ready(function(){

    var $eduRow = $("#edu-row");
    var select = $('<select class="selectoption"><select />');
    //you can append html without $() 
    $(select).append('<option value="" disabled selected>Degree option</option>');
    $(select).append('<option value="1">High School</option>')
    $(select).append('<option value="2">College</option>')
    $(select).append('<option value="3">Bachelors degree</option>')

    var div = $('<div class="input-field col s12 m4 l4"></div >');
    $(div).append(select)

    $eduRow.append(div);
})

Here is a fiddle : https://jsfiddle.net/m0786yq4/

My laptop is dead and its late here (UK) so I'll take a look in the a.m. for you.

2b77bee6-5445-4c77-b1eb-4df3e5 · Accepted Answer · 2016-07-25 19:41:36Z

0

This will append the div & drop down to the end of the body, you can use any other tag to control where the html will be added.

$('body').append('<div id="maindiv"></div>');
$('#maindiv').append('<select id="ddww" class="selectoption"></select>');
$('#ddww').append('<option value="" selected>Degree option</option>');
//all other options

answered Jul 25, 2016 at 19:41

2b77bee6-5445-4c77-b1eb-4df3e5

9671 gold badge17 silver badges31 bronze badges

Collectives™ on Stack Overflow

Cannot dynamically create select with its options

3 Answers 3

9 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Related