Dynamically Create Select Input Field

Question

I am having an issue while trying to create a Materialize select input field dynamically using jQuery. My goal is to append a div with a select field when a button is clicked. Here is my current code:

$(document).ready(function(){
  $('select').formSelect();
});

$("#addSelect").click(function(){
   $("#addSelect").addClass("disabled");
   $("#addSelect").hide();    
   $("#newContent").append("<div class='row'><div class='input-field col s12'><select> <option value='' disabled selected>Choose your option</option><option value='1'>Option 1</option><option value='2'>Option 2</option><option value='3'>Option 3</option> </select><label>Materialize Select</label><label>Materialize Select</label></div></div><button class='waves-effect waves-light bg-blue btn right' type='button'>Go</button>");  
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="container">
<div id='newContent'></div>
<br>
<button class="waves-effect waves-light bg-blue btn right" id="addSelect">Add Select</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

It adds all the html for the select when I inspect the element, however the select doesn't work. Maybe it's a css issue?

Thanks for any help!

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — peeebeee, Jun 25 '18 at 14:51

score 2 · Accepted Answer · answered Jun 25 '18 at 14:53

The problem is that you are running your $("select").formSelect() function before your dynamically added select box is appended to the DOM.

This can be fixed by explicitly calling .formSelect() on the newly added element:

$("#addSelect").click(function(){
   $("#addSelect").addClass("disabled");
   $("#addSelect").hide();    
   $("#newContent").append("<div class='row'><div class='input-field col s12'><select> <option value='' disabled selected>Choose your option</option><option value='1'>Option 1</option><option value='2'>Option 2</option><option value='3'>Option 3</option> </select><label>Materialize Select</label><label>Materialize Select</label></div></div><button class='waves-effect waves-light bg-blue btn right' type='button'>Go</button>")

// Find the newly added element and call formSelect() on it.
.find("select").formSelect();
});

Working example: https://codepen.io/sdflkjgnsdlfn/pen/pKZKOr

There are some CSS issues but this should get you going!

This helped me a lot, thank you! I tested it in my actual project and it fixed it 100%, style issues and all. Thank you! — parrigin777, Jun 25 '18 at 15:03
I support this answer - just as addon: In the materalize css all `select` are hidden by default. To make dynamically added `select` visible to the DOM, you have to initialize them with the `formSelect()` function. — toffler, Jun 25 '18 at 15:05

score 0 · Answer 2 · answered Jun 25 '18 at 14:54

0

In your materialize.min.css in line 13 select is set to display: none;

answered Jun 25 '18 at 14:54

toffler

818
7
16

Dynamically Create Select Input Field

2 Answers2