Question

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<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>

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>

实现CSS选择下拉列表

2 个答案: