无法目标物化，选择下拉列表项

Question

我的HTML

<div id="address-book" class="col s6">
 <label>ADDRESS BOOK</label>
 <select class="clean-input">
  <option disabled selected>Choose Address</option>
  <option>Saved address 1</option>
  <option>Saved address 2</option>
  <option>Saved address 3</option>
 </select>
</div>

materialize 生成的：

<div id="address-book" class="col s6">
  <label>ADDRESS BOOK</label>
  <div class="select-wrapper clean-input initialized"><span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-77f55358-fb61-17c0-08b1-78d72bff710c" value="Choose Address">
    <ul id="select-options-77f55358-fb61-17c0-08b1-78d72bff710c" class="dropdown-content select-dropdown ">
      <li class="disabled "><span>Choose Address</span></li>
      <li class=""><span>Saved address 1</span></li>
      <li class=""><span>Saved address 2</span></li>
      <li class=""><span>Saved address 3</span></li>
    </ul>
    <select class="clean-input initialized">
    <option disabled="" selected="">Choose Address</option>
    <option>Saved address 1</option>
    <option>Saved address 2</option>
    <option>Saved address 3</option>
    </select>
  </div>
</div>

我试图锁定下拉列表项：

$('#address-book div ul li').on('click', function(){
 $(alert('yes'));
});

我尝试过多种不同的方法来钻取列表项，但它们不起作用。我创建了精确的钻取作为测试和警报工作。

Answer 1

您需要使用.dropdown-button类而不是.select-dropdown

请参阅更多有关母化下拉列表这里的信息。

​

$('.dropdown-button').on('click', function() {
  console.log('yes');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<div class="select-wrapper clean-input initialized"><span class="caret">▼</span>
  <input type="text" href="#" class="dropdown-button btn" data-activates="drop" readonly="true" value="Choose Address" />
  <ul id="drop" class="dropdown-content select-dropdown ">
    <li class="disabled "><span>Choose Address</span>
    </li>
    <li class=""><span>Saved address 1</span>
    </li>
    <li class=""><span>Saved address 2</span>
    </li>
    <li class=""><span>Saved address 3</span>
    </li>
  </ul>
</div>

​

Answer 2

如果在通过物化将select转换为ul时遇到问题，您可以将类class="browse-default"添加到select标记中，这样就可以获得没有ul的select。

下面是一个针对选项的片段，并在控制台中打印所选选项的值：

​

$('select').on('change',function(){
  console.log($('select').find(":selected").text());
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<label>Browser Select</label>
  <select class="browser-default">
    <option disabled selected>Choose Address</option>
      <option>Saved address 1</option>
      <option>Saved address 2</option>
      <option>Saved address 3</option>
  </select>

​