8

I'm using a MaterializeCSS form, and I'm having an issue getting the select option to revert back to it's disabled "Choose your option" value when I clicked the Reset button.

I'm able to clear everything, even the Select option with what I have now, but cannot figure out how to get it clear back to it's disabled value.

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

Here's the JS

$(".btn").click(function(){
    $("form input").val("");
});

$('select').material_select();

Codepen

4 Answers 4

9

You have to reset both select element and 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();
2

You have to select that select the input to the none value and then re render the component:

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

Here is a fiddle with it https://jsfiddle.net/xjqgeuhp/

0

Now in Materializecss 1.0.0 with angular 6, you dont have to do like accepted answer. just paste below code and you will done.

I am create saperate function, so I can use every where in my code.

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

this will refresh all the select element whose value is null or "" from [(ngModel)].

we can reset one by one by setting id instead of select like this

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

I just tested this below works I am using 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()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.