Topic: How to hide Select after initialization
*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);
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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