代码之家  ›  专栏  ›  技术社区  ›  ebillis

jquery-append-in-office选择输入

  •  1
  • ebillis  · 技术社区  · 6 年前

    我有一个带有OfficeUI结构类的HTML选择:

    <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"));
    

    如果我删除了办公室的类,(一个基本的HTML选择输入),就可以了!所以我想问题来自办公室,但我不知道为什么。

    有人知道吗?

    1 回复  |  直到 6 年前
        1
  •  2
  •   gagan    6 年前

    我不是办公结构方面的专家,但根据我的理解,您不能简单地使用jquery来修改结构组件。如果检查元素,可以看到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]);
      }
    }