如何向 html 中的 select 元素添加更多选项？
[英]How can i add more options to a select element in html?
问题描述
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找出为什么它只添加第一个元素
这是我的代码：
<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>
1 个解决方案
解决方案1
1 2022-01-16 15:16:57
如果在调用 add_options_to_select()之后初始化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 change the HTML of an element when different options are selected in a separate <select> element?
如何使用一组相同的ng-options添加多个select元素
[英]How to add more than one select element with same set of ng-options
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.