Topic: Material Select, Updating SelectedIndex doesn't update text
As the title says really, when I use selectedIndex to edit the selected item in a select box, it doesn't update the text of the selected item.
I used the following code:
document.getElementById("modalEditRosterRow_Position").selectedIndex
This IS updated when I manually select another option however if I edit this with JS, the selected item doesn't visually update.
document.getElementById("modalEditRosterRow_Position").selectedIndex = 3
Add comment
Hello,
I've prepared a working solution for Your problem. I think it might be helpful in this case:
<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 class="btn" id="select-option-2" data-index="2">Select Option 2</button>
$('.mdb-select').material_select();
$('#select-option-2').on('click', function() {
let index = $(this).attr('data-index');
$('.mdb-select option').parents().find('.dropdown-content li')[index].click();
})
Regards 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: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No