Topic: Reset Material Select with Javascript/jQuery

givekidsclothes pro asked 5 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?

rlambert pro answered 4 years ago


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

Adrian Sawicki free answered 5 years ago


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

Josip Tomašev premium answered 5 years ago


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

givekidsclothes pro answered 5 years ago


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

Josip Tomašev premium answered 5 years ago


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 5 years ago

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

Vinicius Credendio free commented 3 years ago

Thx, worked like a charm!


givekidsclothes pro answered 5 years ago


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>

Josip Tomašev premium answered 5 years ago


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

Please insert min. 20 characters.

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