Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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

scs free asked 6 years ago


Hi,

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 (){
  $('.mdb-select').material_select('destroy');
  $('#option').text('YAYITISTOTALLYNEW');
  $('.mdb-select').material_select();
})

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,
Kuba



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags