jQuery/Materialise：將選擇選項改回禁用選擇清除

Question

我正在使用MaterializeCSS表單，並且在點擊時我有一個問題讓選擇選項恢復爲禁用「選擇您的選項」值重置按鈕。

我可以清除所有內容，即使是現在我所擁有的選擇選項，但無法弄清楚如何清除它恢復爲禁用的值。

<div class="row"> 
    <form class="col s12"> 
     <div class="row"> 
      <div class="input-field col s12"> 
       <input id="last_name" type="text" class="validate"> 
       <label for="last_name">Last Name</label> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="input-field col s12"> 
       <select class="icons" id="platform" name="platform"> 
        <option value="None" class="grey-text text-darken-3" disabled selected>Choose your option</option> 
        <option value="PS4" data-icon="images/ps4.jpg" class="left circle">Playstation 4</option> 
        <option value="PC" data-icon="images/steam.ico" class="left circle">PC</option> 
        <option value="XBOX" data-icon="images/xbox.ico" class="left circle">XBox One</option> 
       </select> 
       <label>Platform:</label> 
      </div> 
     </div> 

     <a class="waves-effect waves-light btn">Reset</a> 
    </form> 
</div> 

這裏的JS

$(".btn").click(function(){ 
    $("form input").val(""); 
}); 

$('select').material_select(); 

Codepen

Answer 1

你必須復位兩個select元素和材料選擇：

var select = $('select'); 

$(".btn").click(function(){ 
    $("form input").val(""); 

    select.prop('selectedIndex', 0); //Sets the first option as selected 
    select.material_select();  //Update material select 
}); 

select.material_select(); 

Answer 2

你必須選擇選擇輸入到沒有值，然後重新渲染組件：

$(".btn").click(function(){ 
    $("form input").val(""); 
    $("select").val("None"); 
    $('select').material_select(); 
}); 
$('select').material_select(); 

這裏是它https://jsfiddle.net/xjqgeuhp/

提琴