how to preselect value in a Material Select Dropdown?


Topic: how to preselect value in a Material Select Dropdown?

belu pro asked 7 years ago

Hi, I am using the same form with several Dropdowns for creating new users and editing users. Therefore in edit-mode I need the value of the user to be preselected. But it does not work with the html - selected -string. How can I make a value preselcted?   thanks

Mikołaj Smoleński staff answered 7 years ago

Hello, This is a short example how to choose one of the values programatically: HTML:
<select class=”mdb-select”>
<option value=””disabled selected>Choose your option</option>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>
<option value=”3″>Option 3</option>
</select>
<label>Example label</label>
<button id=”change-value” data-value=”Option 2″ class=”btn btn-primary”>Change value to Option 2</button>
JS:
$(document).ready(function() {
  $(‘.mdb-select’).material_select();
  $(‘#change-value’).on(‘click’, function(){
    let newValue = $(this).attr(‘data-value’);
    $(‘.select-dropdown’).val(newValue);
  })
});
Regards

belu pro answered 7 years ago

hi, thanks for your answer! The thing is, that I need the argument to be the value (in your example 2) and not the Option 2 - because it is multilangual and I do not have saved the Option 2 string in the database, but the value. Isn't there a normal html drown? This seems a little to much overwhelm for a dropdown.   Thanks Bernhard

Mikołaj Smoleński staff answered 7 years ago

Please change the code like this to operate using values:
$('#change-value').on('click', function(){
  letnewValue = $(this).attr('data-value');
  letnewText = $('.mdb-select').find('option[value='+newValue+']')[0].outerText;
  letnewLi = $('.dropdown-content').find('span:contains('+newText+')').parent();
  newLi.trigger('click');
})
Regards

sysadmin pro answered 7 years ago

Just a QOL suggestion. We need a better way of preselecting mdb select values rather than finding the li that contains the text string. Can we please add the select ID and name into material_select function var options so we can target a specific dropdown instead of all. Either add it into the <ul> class or data-attributes. Then perhaps add a data-attribute into each LI with the option value so ew don't have to do the find('span:contains(mytext)')

Mikołaj Smoleński staff answered 7 years ago

Unfortunately, for this moment we don't provide such functionality. Regards

bernhard@lukas.cd pro commented 7 years ago

Hi, and how would the script look like if I wanted to load a certain value on page load? thanks!

Mikołaj Smoleński staff commented 7 years ago

You just need to add 'selected' attribute to the option tag.

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