Question

我使用的是MaterialiseCSS表格，而我在选择该选项以恢复其已停用时遇到问题＆＃34;选择您的选项＆＃34;单击“重置”按钮时的值。

我能够清除所有内容，甚至是我现在所拥有的选择选项，但无法弄清楚如何清楚地了解它的禁用值。

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

Answer 3

现在在Materializecss 1.0.0和angular 6中，您不必做已接受的答案。只需粘贴下面的代码，您就可以完成。

我正在创建saperate函数，因此可以在代码中使用所有位置。

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

这将刷新[（ngModel）]中所有值为null或“”的选择元素。

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

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

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

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

4 个答案: