Topic: Material Select, Updating SelectedIndex doesn't update text

ashleyww93 free asked 6 years ago


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

Mikołaj Smoleński staff answered 6 years ago


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

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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags