1

我有一个带有办公室 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 选择输入）它的工作！所以我认为问题来自办公室，但我不知道为什么。

有人知道吗？

4

1 回答 1

2

我不是 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]);
  }
}
于 2018-08-21T13:55:26.220 回答