jQuery/物化 : Changing select option back to disabled select on clear

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元素和 Material 选择:

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();