Удаление атрибута - Javascript

Question

У меня есть этот очень простой выбор.Я хочу иметь опцию только при открытии страницы.

<select class="custom-select form-control" id="coreBankingProject" name="coreBankingProject" readonly="true">
    <option>{{settings.coreBankingProject}}</option>
</select>

Но затем я нажимаю кнопку

<button type="button" class="btn btn-primary-outline" (click)="getGitlabProjects()"><span class="fa fa-download"></span> Get projects</button>

Я запускаю функцию, которая получает список проектов.

getGitlabProjects() {
  this.gitlabService.getProjects(this.gitlabUrl, this.gitlabToken).subscribe(projects => {
    this.projects = projects;
  })
}

Как теперь очистить эту опцию выбора и вставить туда проекты?Я хочу показать имена проектов project.name, а также мне нужно удалить атрибут readonly.

edit: мой текущий код показывает только опции из последнего выбора.У меня есть 4 выбора.

 getGitlabProjects() {
this.gitlabService.getProjects(this.gitlabUrl,this.gitlabToken).subscribe(projects => {
  this.projects = projects;
  this.btnGetProjectsClicked = true;
  console.log(projects);
  let coreBankingProjectSelect = document.getElementById("coreBankingProject");
  let customerUIProjectSelect = document.getElementById("customerUIProject");
  let adminUIProjectSelect = document.getElementById("adminUIProject");
  let clientUIProjectSelect = document.getElementById("clientUIProject");

  //remove previous options
  coreBankingProjectSelect.innerHTML = '';
  customerUIProjectSelect.innerHTML = '';
  adminUIProjectSelect.innerHTML = '';
  clientUIProjectSelect.innerHTML = '';

  for(let i=0;i<projects.length;i++) {
    let option = document.createElement("option");
    option.text = projects[i].name;
    option.value = projects[i].name;

    //append projects
    coreBankingProjectSelect.appendChild(option);
    customerUIProjectSelect.appendChild(option);
    adminUIProjectSelect.appendChild(option);
    clientUIProjectSelect.appendChild(option);
  }
  // remove readonly
  coreBankingProjectSelect.removeAttribute("readonly");
  customerUIProjectSelect.removeAttribute("readonly");
  adminUIProjectSelect.removeAttribute("readonly");
  clientUIProjectSelect.removeAttribute("readonly");


})

}

Answer 1

Я видел, что кто-то уже получил доступ к части ответа removeAttribute, если вы также хотите удалить предыдущую опцию из select, вы можете просто добавить следующее перед циклом for, который предложил vbuzze.

select.innerHTML = '';

Answer 2

Параметры вставки:

select = document.getElementById('coreBankingProject');
select.innerHTML = '';

for (index = 0; index < this.projects.length; ++index) {
   const p = this.projects[index];
   if (index === 0){
      opt.setAttribute("selected", "selected");
   }
   var opt = document.createElement('option');
   opt.value = p.name;
   opt.innerHTML = p.name;
   select.appendChild(opt);
}

Удалить только для чтения:

select.removeAttribute('readonly');