实现CSS选择下拉列表

Question

我正在使用Materialise CSS为我的应用程序，使用媒体查询我正在使我的查询响应。选择下拉菜单，我们无法选择任何选项，在笔记本电脑中它工作正常，但在平板电脑和移动视图中它不工作..可以任何人救命？

<div class="input-field col s12 newid m6 l6">
   <select>
           <option value="" disabled selected>All</option> 
           <option value="1">Option 1</option>
           <option value="2">Option 2</option> 
           <option value="3">Option 3</option> 
  </select>
  <label>Data</label> 

@media screen and (max-width: 320px) { 
  .newid { width: 96%!important;
           margin-top: 8%!important;
           margin-left: 0%!important; 
         }
 }   

Answer 1

您是否初始化了JavaScript中的下拉菜单？ 必须初始化作为Materialise CSS一部分的许多组件才能在网页上运行？

代码应该是这样的

  document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});

Answer 2

我认为你已经错过初始化选择你的javaScript了。 您可以尝试使用Materialise css选择选项。

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

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <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> <div class="container"> <h5>materialize Select Option. </h5> <div class="input-field"> <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> </div> </div>