JQuery добавить в Office выберите вход

Question

У меня есть HTML Select с офисными классами UI Fabric:

<div class="ms-Dropdown" tabindex="0">
   <label class="ms-Label">Modèles</label>
   <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
   <select id="modelsSelectbox" name="modelsSelectbox" class="ms-Dropdown-select">
        <option>Loading...</option>
   </select>
</div>

Это хорошо работает, но когда я пытаюсь реализовать этот код Jquery таким образом, чтобы добавить новую опцию, это не работает:

$('#modelsSelectbox')
   .append($("<option></option>")
   .attr("value",1)
   .text("d"));

Если я удаляю классы Office, (базовый ввод HTML), это работает! Так что проблема в офисе, я думаю, но я не знаю почему.

Кто-нибудь знает?

Answer 1

Я не эксперт по ткани Office, но, насколько я понимаю, вы не можете просто использовать jQuery для изменения компонентов ткани. Если вы осмотрите Элементы, вы увидите, что Fabric генерирует дополнительные элементы DOM на лету. Я не думаю, что есть простой способ добавить динамические параметры. Одним из подходов может быть повторная инициализация компонента Dropdown:

function initDropDown() {
   var $dropdown = $(".ms-Dropdown");
   $dropdown.find("select").innerHTML = "<option></option>";
   $dropdown.find(".ms-Dropdown-title").remove();
   $dropdown.find(".ms-Dropdown-items").remove();
   var $dropDownSelect = $(".ms-Dropdown-select");
   //your dynamic options
   $('<option value="0">option 1</option>').appendTo($dropDownSelect);
   $('<option value="1">option 2</option>').appendTo($dropDownSelect);
   $('<option value="2">option 3</option>').appendTo($dropDownSelect);
   //initialise component
   var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
   for (var i = 0; i < DropdownHTMLElements.length; ++i) {
       var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
   }
}

Если вам не нужны динамические параметры, просто инициализируйте компонент:

function init() {
  var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
  for (var i = 0; i < DropdownHTMLElements.length; ++i) {
    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
  }
}