javascript - Find Options text in Dropdown and set selected and change text

Question

with vanilla javascript I'd like to loop through my dropdown, and change the selected one, and then change the text that is displayed. I have it selecting, but I'm not getting the object name correct to change the optionText? of the item.

var textToFind = 'LdapUsers';

var dd = document.getElementById('membershipProvider');
for (var i = 0; i < dd.options.length; i++) {
    if (dd.options[i].text === textToFind) {
        dd.selectedIndex = i;
        i.options.text = "Edgewood Login";  //This is WRONG
        break;
    }
}

guidance is appreciated.

Answer 1

You can use a querySelector and a selector to access it without a loop.

v = "222";

selProvider = document.querySelector("#membershipProvider option[value='" + v + "']");

if (selProvider) {
  selProvider.text = "CHANGED!";
  selProvider.selected = true;
}

<select id="membershipProvider">
  <option value='111'>AAA</option>
  <option value='222'>BBB</option>
</select>