change mdb-select option via api

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: change mdb-select option via api

ebebendel pro asked 7 years ago

hi,how can i change a select option by jquery command?i have a html code:<select class="mdb-select" id="xx" data-value=";" ><option lang="de" value="1">Option1</option><option lang="de" value="2">Option2</option></select>an i did a  $('.mdb-select').material_select();All looks finequestion:i want to change the selected option programatically as i did with   $("xx").val("2");How can i do this with the initialized mdb-select block?thx in advanceEberhard

Mirosław Stasiak answered 7 years ago

Hi,

1. First, you have to destroy the select
$('.mdb-select').material_select('destroy');
2. Change option in select with your code
3. Initialize select again
$('.mdb-select').material_select();

Check forum, there were a few same topics.

Regards,

kaduamaral commented 7 years ago

Really? I'm starting to regret buying it! Why haven't listened a change event? OMG!

Mikołaj Smoleński staff answered 7 years ago

Hello, You can change input value using the following code: 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
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
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
ebebendel
Pro User
20Support score
3Questions 1Answers
0Snippets likes 1Snippets