Hide options in mdb-select

Topic: Hide options in mdb-select

BMarkus pro asked 7 years ago

Hi there!

I am trying to make a dependent select so then I am selecting one option in the first select, some options of the second select just disappear.

I was trying to make this with JavaScript:

function changeSecond( firstSelect ) {
    var idFirst = firstSelect.options[firstSelect.selectedIndex].value;
    var secondSelect = document.getElementById('secondSelect');
    var numOfSecondOptions = secondSelect.options.length;

    for ( i = 1 ; i < numOfSecondOptions ; i++ ) {
        if ( secondSelect.options[i].dataset.idfirst == idFirst ) {
            secondSelect.options[i].className = 'd-block';
        } else {
            secondSelect.options[i].className = 'd-none';
        }
    }
}

But 'display: none' doesnt do anything.
In the web code of the "live" page the css option 'display: none!important;' was shown.
I also tried it with jQuery, but the result was the same, nothing disappeared.

As I changed the class from 'mdb-select' to 'browser-default' everything worked fine.

How can I hide options in mdb-select?

Thanks!

Regards
Markus

Add comment

Mikołaj Smoleński staff answered 7 years ago

1 0 Best answer

Hi BMarkus, I've prepared for You an example which shows how to remove an option from select. I think it might be helpful in Your issue:

// HTML
<div class="container">
 <div>
  <select id="select-box" class="mdb-select colorful-select dropdown-primary">
   <option value="" disabled selected>Choose your country</option>
   <option value="1">USA</option>
   <option value="2">Germany</option>
   <option value="3">France</option>
   <option value="4">Poland</option>
   <option value="5">Japan</option>
  </select>
 </div>
 <button class="btn-save btn btn-primary btn-sm" id="remove-value" data-value="3">Remove value #3 (France)</button>
</div>

// JS
$('.mdb-select').material_select();
$('#remove-value').on('click', function () {
 let value = $(this).attr('data-value');
 $('#select-box option[value=' + value + ']').remove();
 $('.mdb-select').material_select('destroy');
 $('.mdb-select').material_select();
})

Regards

leegellie pro commented 6 years ago

This is good but what if I want to hide options so I can un-hide them later?

Mikołaj Smoleński staff commented 6 years ago

You will have to define a new variable for them before removing. Then just add them to select and update it again to see the changes.

Best regards

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: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

BMarkus

Pro User

10Support score
2Questions 1Answers

0Snippets likes 0Snippets