How to hide Select after initialization


Topic: How to hide Select after initialization

jps mack pro asked 3 years ago

*Expected behavior*Select element does not show on page

*Actual behavior*Select element shows on page

Resources (screenshots, code snippets etc.)

I also have jQuery at my disposal so if you have any solutions using that as well that would be great.

I have a select element on my page:

<select name="customerid" id="customerid" data-mdb-filter="true" class="select defOff"  id="customer" hidden>
  <option disabled selected>-- Customer</option>
</select>

as you can see the hidden attribute is applied but I suspect when .select is initialized it ignores this. I was unable to find a method/param in the select API to hide the element using javascript. I've also tried using jQuery's .prop('hidden',true) /.hide() but it doesn't seem to work either.

In my jquery document ready event I have this:

const customerSelect = mdb.Select.getInstance(document.getElementById('customerid'));
console.log(customerSelect);

Michał Duszak staff answered 3 years ago

You can wrap this Select in a <span> with .hidden class, as Select itself gets re-rendered, it will still inherit display: none; style.

https://mdbootstrap.com/snippets/standard/m-duszak/3163653#html-tab-view


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: MDB Standard
  • MDB Version: MDB5 3.8.0
  • Device: Intel x86
  • Browser: Chrome
  • OS: Ubuntu 20.04
  • Provided sample code: No
  • Provided link: No