CODEWITHSUNDEEP
jquerymaterialize
Gorgon_Union
Gorgon_Union

Reputation: 583

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

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

Upvotes: 8

Views: 13295

Answers (4)

dpsproservices
dpsproservices

Reputation: 1

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

Upvotes: 0

Deva
Deva

Reputation: 2121

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

Upvotes: 0

daniel.brubeck
daniel.brubeck

Reputation: 654

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/

Upvotes: 2

Allan Pereira
Allan Pereira

Reputation: 2570

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

Upvotes: 9

Related Questions