Reset Material Select with Javascript/jQuery

Topic: Reset Material Select with Javascript/jQuery

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

rlambert pro answered 5 years ago

0 0 Best answer

I am still having this same problem with <strong>material_select</strong>. 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:
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">        function resetSelect(id) {
            $(id).material_select('destroy');
            $(id).val('0').change();
            $(id).material_select();
        }</pre>
</div>
<div>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:</div>
<div>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. :-)</div>
<div>
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">// change handler for group list</pre>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">function groupChange() {</pre>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">  var selected = $('#groupList').val();
  console.log(selected);</pre>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">  resetSelect("#resourceList");</pre>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">  if (selected.length > 0) {
    selected.forEach(elem=> {
      var $div = $("<optgroup>", {
        label:"Resource Group: " + parseGroupName(elem)
    });
    $("#resourceList").append($div);
  });
 }
}</pre>
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">function parseGroupName(id) {
  // "/subscriptions/2c923203-e491-4f5f-bf2c-5bc6210a1fc5/resourceGroups/enki"
  varidx = id.lastIndexOf("/");
  return id.substring(idx+1);
}</pre>
</div>
Here is how the multiselect is laid out in HTML:
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><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></pre>
Thanks in advance for whatever help and advice you can give!

</div>
== Ross ==

</div>
</div>

Please insert min. 20 characters.

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

Adrian Sawicki free answered 7 years ago

0 0 Best answer

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

Add comment

Josip Tomašev priority answered 7 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

givekidsclothes pro answered 7 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 priority answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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

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

Vinicius Credendio free commented 4 years ago

Thx, worked like a charm!

Add comment

givekidsclothes pro answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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

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

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