1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Select object not updating displayed value

Dylan Keith free asked 3 years ago

Expected behavior: When the value of a select object is changed, the displayed selected object should be updated as well.

Actual behavior: Value is updated in the backend, but not displayed in the select object

Resources (screenshots, code snippets etc.)

This select object works fine: select class="browser-default custom-select"

but the mdb select object: select class="mdb-select md-form" does not update after changing the value via JS.

I've searched through the documentation a number of times and can't find anything on this, except for a message saying:

"In addition, you will need a separate call for any dynamically generated select elements your page generates."

But no information on what call to make.

Please advise,

Thanks

Tomek Makowski staff answered 3 years ago

If it works it fine then but try maybe this

https://mdbootstrap.com/snippets/jquery/tomekmakowski/2136845?view=project#js-tab-view

Regards

Dylan Keith free answered 3 years ago

I'm not trying to add new elements to the select, but rather I want to change the value/display of the object for the user. For instance, if an object(mongodocument) is loaded to the edit page, it might update the category to 'Prospect' as below. This part works as expected, but when I load a second document, the displayed object is still "Prospect" even if the actual value might now be "General Update". I was able to find a work around by re-initializing the select object after each data call. Is this the best solution? or is there a better way to dynamically update the select

Initial condition loaded from the ajax call

value of the select = "Prospect" via document.getElementById('category').value

Value after a forced update

Value of the select = "Quote" via document.getElementById('category').value after via document.getElementById('category').value="Quote" but the select still displays Prospect

Tomek Makowski staff answered 3 years ago

I'm trying to reopen your problem is this something similar to your expect

https://mdbootstrap.com/snippets/jquery/tomekmakowski/2136845?view=project#js-tab-view

If it doesn't please show me your AJAX code and all js

Regards

Tomek Makowski staff answered 3 years ago

Hi

Can you show your code in snippet code editor

Regards

Dylan Keith free commented 3 years ago

Sure, https://mdbootstrap.com/snippets/jquery/dylan_keith/2134241?action=forum_snippet

I can't run the client code inside of the snippet editor as it doesn't find my object IDs, but i'll describe it down below.

I'm updating the select object via AJAX, and want to run the following: document.getElementById("commentType").value="Customer Contact" This seems to update the value of the select box (This does work correctly in the snippet) but in my code, as soon as I add the mdb.js file, I have to update the temp0 object that is spawned from the select object. If I update both values it works as expected. I've included the object below from the DOM browser.

Thanks for your time

Dylan Keith free commented 3 years ago

Will also note that downloading the snippet to the desktop and extracting / running yeilds the same negative results. Same issue i'm experiencing in my code
Write
Create snippet
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: 4.19.0
  • Device: Desktop
  • Browser: Firefox / Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
select
About author
Dylan Keith
20Support score
2Questions 1Answers 0Snippets