Jquery 在 Office 选择输入中追加

Question

我有一个带有 Office UI Fabric 类的 HTML Select :

<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 Fabric 方面的专家，但根据我的理解，你不能简单地使用 jQuery 来修改 Fabric 组件。如果您检查元素，您可以看到 Fabric 动态生成其他 DOM 元素。我认为没有一种简单的方法来附加动态选项。一种方法可能是重新初始化下拉组件:

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]);
  }
}