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

查看有关materalize下拉列表here

的更多信息

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您在使用Materialize将select变为ul时遇到问题，可以将课程class="browse-default"添加到select标记，然后获得select 1}}没有ul。

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

＆＃13;

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

＆＃13;

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

＆＃13;

无法定位物化选择下拉列表项

2 个答案: