Jquery 在 Office 中附加 select 输入

Question

我有 HTML Select 与办公室 UI 面料类 :

<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 select 输入）就可以了！所以我认为问题来自办公室，但我不知道为什么。

有人知道吗？

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

Jquery 在 Office 中附加 select 输入

Jquery append in Office select input

html

jquery

office-js

office-fabric