如何在Angular 4中多次重复jQuery下拉列表小部件？

我使用jQuery UI的selectMenu小部件创建了下拉列表，如下图所示。

现在我被赋予了一个任务，通过Angular 4在屏幕上重复这个元素2或3次。但是我没有得到所需的输出。 显示下拉列表，但只有第一个正确，如上图所示。 但是显示了另外两个下拉列表，如下图所示。 （CSS样式和Javascript函数不存在）。

下面给出了下拉列表的HTML。

           Select an Option: 
   Standard Screw Adjustment   Tamper Resistant - Factory Set Handknob   Hex Head Screw with Locknut Hex Head Screw with Locknut Hex Head Screw with Locknut   
   

这是下拉列表的CSS。

 .ui-selectmenu-category { color: #5f5f5f; padding: 0.5em 0.25em; } .ui-menu-item { } .ui-menu-item .ui-menu-item-wrapper { display: inline-block; padding: 1em 2px; } .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper { padding: 0.5em 0 0.5em 3em; } .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon { height: 24px; width: 14px; top: 0.1em; } /* select with CSS avatar icons */ option.avatar { background-repeat: no-repeat !important; padding-left: 20px; } .ui-menu-item .ui-menu-item-wrapper.ui-state-active { border-width: 1px 0 1px 0; border-color: #cccccc; background-color: #e4ebf1; color: #000; } .ui-menu-item .ui-menu-item-wrapper.ui-state-active.short { color: #2e6d99; } .ui-menu-item div.ui-menu-item-wrapper { width: 290px; } .ui-menu-item .short { color: #2e6d99; font-weight: strong; width: 30px; padding-left: 0.5em; } .ui-menu-item .price { font-weight: strong; width: 75px; margin-right: -6px; } .overflow { height: 200px; } 

以下是该列表的Javascript文件。

 $(function() { $.widget("custom.mySelectMenu", $.ui.selectmenu, { _renderMenu: function(ul, items) { var that = this, currentCategory = ""; $.each(items, function(index, item) { var li, name, short, price, image; if (item.optgroup != currentCategory) { ul.append( "
" + item.optgroup + "
" ); currentCategory = item.optgroup; } li = that._renderItemData(ul, item); console.log(ul); name = li.text(); short = item.element.data("short"); price = item.element.data("price"); console.log(li, short, price, image); li.prepend( $("", { class: "short" }).html(short) ); li.append( $("", { class: "price" }).html(price) ); if (item.optgroup) { li.attr("aria-label", item.optgroup + " : " + item.label); } }); } }); $("#options").mySelectMenu({ width: 440 }); $("#options") .mySelectMenu() .mySelectMenu("menuWidget") .addClass("overflow"); multiplyNode((".dropdownClass"), 5); }); function multiplyNode(node, count) { var nodeCount = 0; for (nodeCount = count; nodeCount > 0; nodeCount--) { jQuery(node).append( jQuery(node) .children() .first() .clone() ); } } 

现在，这是我遵循的步骤。

1. 创建了一个新的Angular应用程序。
2. 创建了一个名为new的新组件。
3. 在app.component.html文件中，我添加了标记。
4. 在new.component.html文件中，我在body标记下添加了HTML代码（如上所述）。
5. 在new.component.css文件中，我添加了上面指定的完整CSS代码。

现在，问题是由于缺乏jQuery和Angular的经验，我无法找到我应该在Angular项目中添加上述Javascript代码的位置和方式。 那么，有人可以告诉我如何配置我的项目的Javascript和jQuery文件，以便相同的下拉列表将重复3次？