如何向 html 中的 select 元素添加更多选项？

Question

我尝试使用 materialize css 库在 html 中创建一个 select 元素，当我尝试向 select 添加动态选项时（例如，一个列表，列表中的每个元素都是 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();
             
             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>

Answer 1

如果您在 formSelect() 调用 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>

如何向 html 中的 select 元素添加更多选项？

How can i add more options to a select element in html?

html

javascript

css

select

materialize