[ SELECT ] Change values via JavaScript/jQuery

Hello,

Could You please try the following code? I suppose it might be helpful.

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

Hi,

You can try the following code:

HTML:
<div class="container">
<select id="multi-select" class="mdb-select colorful-select dropdown-primary" multiple>
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
<button class="btn-save btn btn-primary btn-sm">Save</button>
<button class="btn-save btn btn-primary btn-sm" id="select-all">Select all</button>
</div>
<button class="btn" id="multi-change">Change values</button>

JS:
$('#select-all').on('click', function() {
let values = [];
let texts = [];
let index = 0;
$('#multi-select option').each(function() {
let value = $(this).val();
let text = $(this)[0].textContent;
if (value) {
values.push(value);
texts.push(text);
let liElement = $(this).parent().parent().find('.dropdown-content li')[index];
if(!liElement.classList.contains('active')) {
$(liElement).trigger('click');
}
}
index++;
})
})
$('#multi-change').on('click', function() {
let values = ["1", "2", "3"];
let texts = [];
let index = 0;
$('#multi-select option').each(function() {
let value = $(this).val();
let text = $(this)[0].textContent;
let liElement = $(this).parent().parent().find('.dropdown-content li')[index];
if (value) {
if (jQuery.inArray(value, values) !== -1) {
$(liElement).click();
}
}
index++;
})
})

Regards