i tried to make a select element in html using materialize css library, and when i try to add dynamic options to the select (for example, a list which each element in the list is an option of the select) and i can't find out why its only adding the first element
here is my code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
jQuery(document).ready(function($){
add_options_to_select();
function add_options_to_select(){
for (i = 0; i < 10; i++)
{
$('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}
}
});
</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id='mySelect'></select>
<label>Assignment</label>
</div>
</div>
</div>
<script>
$('select').formSelect();
$('.datepicker').datepicker();
</script>
</body>
</html>It works fine if you initialize formSelect() after calling add_options_to_select();
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
jQuery(document).ready(function($){
add_options_to_select();
$('select').formSelect();
function add_options_to_select(){
for (i = 0; i < 10; i++)
{
$('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}
}
});
</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id='mySelect'></select>
<label>Assignment</label>
</div>
</div>
</div>
<script>
// $('select').formSelect();
$('.datepicker').datepicker();
</script>
</body>
</html>