無法目標兌現選擇下拉列表項目

我的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')); 
});

我嘗試了多種不同的方式鑽取到列表項中，但它們不起作用。我創建了精確的向下鑽取作爲測試並且警報起作用。

來源

2016-09-13 Spencer West

你需要使用.dropdown-button類代替.select-dropdown

看到materalize的下拉列表中的詳細信息here

$('.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>

來源

2016-09-13 17:16:56 dippas

我需要的列表項爲目標，而不是UL。由於物化產生這個，我不能硬編碼類到列表項。 –

@SpencerWest查看更新後的答案 – dippas

如果您有select問題正在變成一個ul由Materialise公司，您可以將類class="browse-default"添加到select標記，並且在沒有ul的情況下獲得select。

下面是針對該選項並打印INT控制檯所選擇的選項值的片段：

$('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>

來源

2016-09-13 17:45:13

無法目標兌現選擇下拉列表項目

回答

相關問題