Topic: Material select: How do I display custom text for selected option?

studioinsight free asked 5 years ago

I have a really simple select

<select class="mdb-select md-form">
    <option value="1" data-display-value="text 1">Very very long text 1</option>
    <option value="2" data-display-value="text 1">Very very long text 2</option>
    <option value="3" data-display-value="text 1">Very very long text 3</option>

Which is then converted to material select by $(select).materialSelect();

So far so good, I open the drop down, and the "Very very long text" s show up. But when I choose one of these, I want the select to display the content of data-display-value and not the inner text of the option. How can I achieve this?

studioinsight free answered 5 years ago

I managed to write a (nasty) workaround for my own problem, and have created a snippet here:

MDB is a really powerful tool, it saves lot of time of front-end coding and styling, but it yet still lacks of many functionalities that lets your customers customize their components.

While looking at the documentation I was crazily looking for a list of options to be passed to the materialSelect() but failed, so I hope in the future some will be added, including the display member feature (C# developers will feel me)

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.7
  • Device: Mobile first
  • Browser: Any possibly
  • OS: Any
  • Provided sample code: Yes
  • Provided link: No