jQuery / Materialize：将选择选项更改回禁用选择清除答案

【问题标题】：jQuery/Materialize: Changing select option back to disabled select on clearjQuery / Materialize：将选择选项更改回禁用选择清除
【发布时间】：2016-05-23 19:38:59
【问题描述】：

我正在使用 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

【问题讨论】：

标签： jquery materialize

【解决方案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();

【讨论】：

【解决方案2】：

您必须选择将输入选择为无值，然后重新渲染组件：

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

这是一个小技巧https://jsfiddle.net/xjqgeuhp/

【讨论】：

【解决方案3】：

现在在Materializecss 1.0.0 和angular 6 中，您不必像接受的答案那样做。只需粘贴以下代码即可。

我正在创建单独的函数，因此我可以在代码中的每个位置使用。

  resetSelect() {
    setTimeout( function() {
        $( 'select' ).formSelect();
    }, 50 );
}

这将刷新 [(ngModel)] 中值为 null 或 "" 的所有选择元素。

我们可以通过设置id来一一重置，而不是这样选择

setTimeout( function() 
   {
         $( 'select' ).formSelect();
   }, 50 );

【讨论】：

【解决方案4】：

我刚刚测试了以下我正在使用 Materialize 1.0.0 的作品

$("last_name").val(""); // reset last_name text input field
M.updateTextFields(); // update the materialize text fields


$("#platform").prop("selectedIndex", 0); // set the first option as selected
$("#platform").formSelect(); // update material select 


// Attempted to use material_select() function was not recognized 
// $("#platform").material_select()

【讨论】：