2016-05-23 2 views
5

Я использую форму MaterializeCSS, и у меня возникла проблема с выбором опции выбора, чтобы вернуться к ее отключению. «Выберите свой вариант», когда я щелкнул кнопку сброса.jQuery/Materialize: изменение опции выбора обратно на отключен select on clear

Я могу очистить все, даже вариант выбора с тем, что у меня есть сейчас, но не могу понять, как вернуть его обратно к его отключенному значению.

<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

ответ

6

Вы должны сбросить как 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(); 
2

Вы должны выбрать, что выбрать вход к нет значения, а затем повторно отобразить компонент:

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

Вот скрипку с ним https://jsfiddle.net/xjqgeuhp/

Смежные вопросы