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

Add comment

Mikołaj Smoleński staff answered 7 years ago

0 0 Best answer

Hello, This is a short example how to choose one of the values programatically: HTML:

<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

Add comment

belu pro answered 7 years ago

0 0 Best answer

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

Add comment

Mikołaj Smoleński staff answered 7 years ago

0 0 Best answer

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

Add comment

sysadmin pro answered 7 years ago

0 0 Best answer

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)')

Add comment

Mikołaj Smoleński staff answered 7 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

About author

belu

Pro User

72Support score
14Questions 9Answers

0Snippets likes 0Snippets