Topic: [ SELECT ] Change values via JavaScript/jQuery
SL-Tech pro asked 6 years ago
Mikołaj Smoleński staff answered 6 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 6 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 6 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 againFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No