Topic: [ SELECT ] Change values via JavaScript/jQuery

SL-Tech pro asked 4 years ago


At now if i change selected value on a select/multiselect ( in JS/jQuery ) and triggering the change event, nothing appens. I cant use select.material_select( "destroy" ); ( and recall ) because in multiselect the button below disappear. There is a way that i can use to make this works properly or i have to save html of button/s, destroy the select, append the html next to the select and call again the .material_select() method ? Thank You

Mikołaj Smoleński staff answered 4 years ago


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


Mikołaj Smoleński staff answered 4 years ago


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


SL-Tech pro commented 4 years ago

Thank you for your reply. So i have to write manually into input text and change value of select? There'arent any methods like: $("#selectID").material_select( { "val": [ "4", "5", "6" ] } ); For the single select is easy to fix this, my question is in particular for the multiple select because destroy and recall .material_select delete confirm button below the wrapper Thank you again


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
Tags