Topic: How can we change the text of an option in multi select dynamically using javascript/jQuery?

scs free asked 6 years ago


Want to change the text of a selected option at run time. how is it possible.

How can we select/deselect an option in multi select dynamically using javascript/jQuery

Jakub Strebeyko staff answered 6 years ago

Hi there scs,

Thanks for reaching out onto this support board! Changing the text of a selected (or any other, in that case) option is possible and only a little bit tricky. First of, material_select hides the initial <select> (as in display: none !important;) to replace it with custom, material, generated <ul> element based on it. As such, it seems way easier to modify the option's inner text during the initial phase.

Let's then say you have a button (#button) and you want clicking it to change one of the <option>s (#option) within the <select>. Consider the following:

$('#button').click(function (){

As you can see, we de-initiate the material select using the 'destroy' option, change the inner text and then let it be initiated anew with the new option.

When it comes to your second question, logic behind the procedure is the same. You de-initiate the material select, apply appropriate properties (selected and/or active) using the .prop() method and then re-initiate the select.

With Best Regards,

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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No