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架构专家，但据我了解，您不能简单地使用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]);
  }
}

jQuery在Office选择输入中追加

1 个答案: