Traté de hacer un elemento de selección en html usando la biblioteca Materialize CSS, y cuando trato de agregar opciones dinámicas a la selección (por ejemplo, una lista en la que cada elemento de la lista es una opción de la selección) y no puedo encontrar averiguar por qué solo está agregando el primer elemento
aquí está mi código:
<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>Funciona bien si inicializa formSelect() después de llamar a 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>