Setting material select value in js


Topic: Setting material select value in js

lede pro premium asked 6 years ago

I have tried all the suggested solutions on here but none of them seem to work. I am currently using the chosen dropdowns instead because of this.

There are some very strange solutions such as

$(‘.select-dropdown li:contains(“Option 2”)’).trigger(‘click’);
$('.select-dropdown li:contains("op2")').trigger('click');

None of these various methods have worked for me. I'm using the fullcalendar.io calendar so I'm getting a variable ID from a json call.

With chosen I can just do

$('#calendarID').val(0);
$('#calendarID').trigger('chosen:updated');

It's far more simple than having to try and find the option then simulate a click on it. It would be nice if we could get something like this implemented because the chosen drop down looks really out of place but the material drop down doesn't appear to allow the setting of a value with javascript.

When I edited I can't enter 4.5.6 into the version number because it's using a spinner and only takes a decimal value


lede pro premium answered 6 years ago

Actually I've made the component.chosen look quite a lot less out of place with 1 style https://prnt.sc/k4cr2g https://prnt.sc/k4cr7l I'd prefer to use the material select because it's 2 fewer files to import on the page

Marta Szymanska staff pro premium answered 6 years ago

Hi, we will try to find a solution to this problem and implement it as soon as possible but could you describe in more details this issue? I mean, what you want to do? Which plugins do you want to connect to each other? You know, as many details as you may tell us and our developers will try to do their best. Best, Marta

lede pro premium commented 6 years ago

Very simply, I don't see a way to update the material select using javascript so I can't use it. It just needs a sensible way to update the selected item with javascript. At the moment all I've been able to find are work-around fixes doing selector searches to locate the correct li element and then simulate a click (none of which work for me). I like the method chosen use because it allows me to just use $('#select').val(id) in jQuery as you would a default select box to change the underlying select element and then they have a function we can call to update the visible select. As well as the $('.mdb-select').material_select('destroy'); we just need a $('.mdb-select').material_select('update'); which would change the selected item based on the hidden select element. It would be nice to have a method which clears all the items and re-populates from the select as well rather than doing destroy then initialising again but that is a separate issue.

Anna Morawska staff commented 6 years ago

Hi, thank you for the suggestion, we will add it to our list of ideas. Best, Anna

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
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No