Reset Material Select with Javascript/jQuery

Topic: Reset Material Select with Javascript/jQuery

givekidsclothes pro asked 8 years ago

I am trying to reset a select field to its default value using jQuery, but I cannot seem to make it work. Is there an API for the Material Select? I found a similar topic at https://mdbootstrap.com/forums/topic/mdb-select/#post-11148, but am still unsuccessful. Here is a sample of my code:

<div class="col-md">
    <div class="md-form">
        <select id="pantSizeSelect" class="mdb-select"></select>
    </div>
 </div>

I initialize the select like this:


<script>
     $(document).ready(function () {
         $('.mdb-select').material_select();
         $('#pantSizeSelect').append('<option value="0" disabled selected>Choose a Pant Size</option>');
     }
</script>

I have tried all of the following and none work:

<script>
     $('.select-dropdown li:eq(1)').trigger('click');
     $('.select-dropdown li:eq(0)').trigger('click');
     $('.select-dropdown').val('0');     
 </script>

Any suggestions?

Add comment

Josip Tomašev pro premium priority answered 8 years ago

0 0 Best answer

you must change order in initialization, and then it will work <script> $(document).ready(function () { $('#pantSizeSelect').append('<option value="0" disabled selected>Choose a Pant Size</option>'); $('.mdb-select').material_select(); } </script> more details of your example you have in documentation https://mdbootstrap.com/javascript/material-select/ in section UPDATING/DESTROYING MATERIAL SELECT...

Add comment

givekidsclothes pro answered 8 years ago

0 0 Best answer

I actually had it swapped in the example script i posted. In my actual files i do append before i initialize the select. I cannot edit the original post anymore so below is how the code actually looks in my files. Still no resolution to this issue. I want to be able to use jQuery/JavaScript to reset the selection to value 0 (Choose a Pant Size) at some point after the user has selected option 1 (Large) or any other value for this select.

<script>
     $(document).ready(function () {
         $('#pantSizeSelect').append('<option value="0" disabled selected>Choose a Pant Size</option>');    
         $('#pantSizeSelect').append('<option value="1">Large</option>');

         $('.mdb-select').material_select();
         
     }
</script>

Add comment

Josip Tomašev pro premium priority answered 8 years ago

0 0 Best answer

in one of my project I used something like this function: <script> function resetSelect(id) { $(id).material_select('destroy'); $(id).val('0').change(); $(id).material_select(); } $(document).ready(function () { $('#pantSizeSelect').append('<option value="0" disabled selected>Choose a Pant Size</option>'); $('#pantSizeSelect').append('<option value="1">Large</option>'); $('.mdb-select').material_select(); } </script> later, in your code you can call this function to reset selection i used this when i'm needed to update select with new options, depending on user's input

richp pro commented 7 years ago

Thank you for sharing this. I was struggling with the same issue until I found your post.

Vinicius Credendio commented 6 years ago

Thx, worked like a charm!

Add comment

givekidsclothes pro answered 8 years ago

0 0 Best answer

That appears to work. Seems unorthodox after using Select2 in previous projects, but it gets the job done. Thanks for your help!

Add comment

Josip Tomašev pro premium priority answered 8 years ago

0 0 Best answer

i'm glad if this helped it's not perfect or elegant solution, but works for me, so i shared with you :)

Add comment

Adrian Sawicki answered 8 years ago

0 0 Best answer

Hello, Josip Tomašev we are grateful for finding a solution to Givekidsclothes question. Regards

Add comment

rlambert pro answered 6 years ago

0 0 Best answer

I am still having this same problem with material_select. I have two lists, #groupList and #resourceList. When there is a new selection in #groupList, I need to add items to the #resourceList for each selected item in the #groupList. Before I modify #resourceList, I want to dump what is there so I can build it new. In my "onchange" handler for the #groupList, I call Josip's function for the #resourceList to clear it out:

        function resetSelect(id) {
            $(id).material_select('destroy');
            $(id).val('0').change();
            $(id).material_select();
        }

I know the function is getting called, but it is not working, unfortunately. Every change to the #resourceList just keeps getting appended.Just in case it matters, here is my onchange handler. A couple things to note:

1. I am only creating option group items so far. Maybe that is part of the problem? 2. I don't know Jack about Javascript. All suggestions welcome. :-)

// change handler for group list

function groupChange() {

  var selected = $('#groupList').val();
  console.log(selected);

  resetSelect("#resourceList");

  if (selected.length > 0) {
    selected.forEach(elem=> {
      var $div = $("<optgroup>", {
        label:"Resource Group: " + parseGroupName(elem)
    });
    $("#resourceList").append($div);
  });
 }
}

function parseGroupName(id) {
  // "/subscriptions/2c923203-e491-4f5f-bf2c-5bc6210a1fc5/resourceGroups/enki"
  varidx = id.lastIndexOf("/");
  return id.substring(idx+1);
}

Here is how the multiselect is laid out in HTML:

<div class="col-md-12 mb-4">
   <select id="groupList" class="mdb-select" multiple onchange="groupChange();">
     <option value="" disabled selected>Choose resource groups(s)</option>
   </select>
</div>

Thanks in advance for whatever help and advice you can give!

== Ross ==

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

givekidsclothes

Pro User

10Support score
1Questions 2Answers

0Snippets likes 0Snippets