如何在下拉列表中仅显示多个项目中的一个项目

Question

我有一张桌子，里面摆满了物品：船只名称、集装箱编号、货物类型等。 我必须制作一个带有搜索功能的下拉菜单。在这个下拉菜单中，我只想显示多个相似值中的一项（因为一艘船可能会出现不止一次）。 我的问题是我真的不知道该怎么做。我是否必须使用 JavaScript 来缩小范围或在 asp.net Core 中使用不同的方法？我有点迷路了..

<table class="plain" width="100%">
    <tbody>
        <tr class="plain">
            <td class="plain" width="100%">
                <input type="submit" name="aktie" value="Goods" class="header_button" />
            </td>
            <td>class="plain">
                <input type="button" value="⏷" class="dropbtn" onclick="myDropdown(3)">
                <div id="myDropdown3" class="dropdown-content">
                    <input onshow="focus()" onclick="event.stopPropagation()" type="text" placeholder="Search.." id="myInput3" class="myInput" onkeyup="filterFunction(3)" onkeydown="inputEvent(3,event)">
                    <div onclick="SelectValue('Vessel', '')">- All Vessels-</div>
                    @*this is the main issue. I display every item.*@
                    @foreach (var item in ViewData["Columns"] as IEnumerable<Project.Models.Folder.ClassName>)
                    {
                        <div onclick="SelectValue('Goods',@item.Goods)">@item.Goods</div>
                    }
                </div>
            </td>
        <tr>
    <tbody>
</table>

这些是我制作的一些 JavaScript 函数。

myDropdown() 将“显示”放在下拉内容后面，使其出现。

filterFunction() 将 'style="none" 放在搜索栏中没有字母的项目后面

inputEvent() 允许您使用箭头键在项目之间导航。

SelectValue() 允许您单击列表中的一项并在表格中对其进行过滤。

Answer 1

如果我正确理解您的问题，您需要一个没有重复值的下拉菜单。您可以简单地将数组传递给 JavaScript 函数以消除重复项，最后在下拉列表中使用它。

这是一个删除重复项的函数示例：

function removeDuplicates() {
    var cars = ["bmw", "audi", "tesla", "audi", "bmw"];
    var cars_without_duplicates = cars.filter( function( item, index, inputArray ) {
           return inputArray.indexOf(item) == index;
    });
    console.log(cars_without_duplicates); // Your console window shows the answer for this example: ["bmw","audi,"tesla"]
}

注意：有多种方法可以删除重复项，您可以选择任意一种。