Material select: How do I display custom text for selected o


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

studioinsight asked 3 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>
</select>

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?


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

https://mdbootstrap.com/snippets/jquery/studioinsight/643734

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.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.7
  • Device: Mobile first
  • Browser: Any possibly
  • OS: Any
  • Provided sample code: No
  • Provided link: No