jQuery/Materialize：在清除时将 select 选项改回禁用 select

Question

我使用的是 MaterializeCSS 表单，当我单击“重置”按钮时，我无法让 select 选项恢复到禁用的 "Choose your option" 值。

我可以清除所有内容，甚至是我现在拥有的 Select 选项，但无法弄清楚如何将其清除回禁用值。

<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 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

您必须 select 将 select 输入到 none 值，然后重新渲染组件：

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

这里有一个fiddle用它https://jsfiddle.net/xjqgeuhp/

Answer 3

现在 Materializecss 1.0.0 with angular 6，您不必像已接受的答案那样做。只需粘贴下面的代码即可完成。

我正在创建单独的函数，因此我可以在我的代码中的任何地方使用。

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

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

我们可以通过设置id而不是像这样select来一一重置

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

Answer 4

我刚刚在下面的作品中测试了我使用的是 Materialise 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()

jQuery/Materialize：在清除时将 select 选项改回禁用 select

jQuery/Materialize: Changing select option back to disabled select on clear

jquery

materialize