Materialize CSS Select Dropdown

Question

I am using Materialize CSS for my application,using media queries i am making my queries responsive.Select Dropdown we are not able to select any option,in laptop it is working fine but in tablet and mobile view it is not working..Can anyone help?

<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

Did you initialize the dropdown menu in your JavaScript? Many of the components that are part of Materialize CSS have to be initialized in order to function on the web page?

The code should be something like this

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

Answer 2

I think you have missed to initialization for select to your javaScript. You can try this for your Select Option Using Materialize 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>