Javascript 如何将3个下拉菜单合并为一个？

我对angular很陌生，我有点被一个问题困扰着。我有一个例子来说明我的问题

函数HelloCntl（$scope）{
$scope.selectname1={}；
$scope.selectname2={}；
$scope.selectname3={}；
$scope.filter1=函数（项）{
返回（！（$scope.selectname1&&$scope.selectname1.id）| | item.id！=$scope.selectname1.id）；
};
$scope.filter2=函数（项）{
返回（！（$scope.selectname2&&$scope.selectname2.id）| | item.id！=$scope.selectname2.id）；
};
$scope.filter3=函数（项）{
返回（！（$scope.selectname3&&$scope.selectname3.id）| | item.id！=$scope.selectname3.id）；
};
$scope.friends=[
{
id:1，名字：'约翰'}，
{
id:2，名字：'玛丽'}，
{
id:3，名字：'迈克'}，
{
id:4，名字：'亚当'}，
{
id:5，名字：'Julie'}
];
}


{{friend.name}


-选择-
{{selectname1}
-挑选-
{{selectname2}}
-挑选-
{{selectname3}}

我试图在一个下拉菜单中实现这段代码，而不是在3个菜单中。每次单击都会显示所选选项

我尝试的总体功能是创建一个包含项目的下拉菜单。选中这些项目后，将使用“删除”按钮在下面打印其名称。选择项目后，应自动从下拉列表中删除该项目，以便不再使用。并且在下面可以添加另一项（追加）

不幸的是，我似乎不知道如何让它工作。 有人能帮我解决这个问题吗？

您可以在第一个select标记中添加一个“multiple”属性

<select ng-model="selectname1" multiple
    ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select -</option></select>
   <div>{{selectname1}}</div>

-选择-
{{selectname1}

如果我正确理解你的问题，至少这在js小提琴中是有效的

---

在这里，您可以找到如何将多个选择限制为三个答案：

我认为这是您所要求的全部实现。您可以更改一些逻辑并适当调整我的示例：

X
名称：{{selected.Name}}{124; ID:{{{selected.ID}}


添加
var-app=angular.module（'myApp'，[]）；
应用控制器（“HelloCntl”，HelloCntl）；
函数HelloCntl（$scope）{
$scope.friends=[
{id:1，名字：'John'}，
{id:2，名字：'Mary'}，
{id:3，名字：'Mike'}，
{id:4，名字：'Adam'}，
{id:5，名字：'Julie'}
];
$scope.selected=$scope.friends[0]；//初始化所选内容
$scope.delete=函数（x）{
变量y=$scope.friends.indexOf（x）；
$scope.friends.splice（y，1）；
}
var指数=6；
$scope.add=函数（x）{
$scope.friends.push({
id:索引，
姓名：x
});
索引++；
$scope.new_selected=''；
}
}

一个下拉列表不能包含相同的代码，因为它们使用相互依赖的过滤器。否则您只需要：

{{s4}

我尝试了这个，但是它显示了太多的错误。这是否也可以通过一个带有删除按钮的下拉菜单实现相同的功能？请在jsfiddle链接中显示这一点好吗@AlekseySoloveyit如果您能够描述您希望代码执行的操作（）会更好。目前，您的过滤器阻止您在多个下拉菜单中选择人名。如果您只有一个菜单，那么这种逻辑就会消失，因为永远不会出现名称重复的情况selected@AlekseySolovey编辑了这个问题。我不知道它是否可以使用过滤器或不使用过滤器实现。是否需要使用多个过滤器或过滤器？因为我对这个概念还不熟悉。我实际上不需要3个下拉列表。您可以使用任何在线IDE显示它吗@KlokerThank非常感谢您的信息实现。我尝试在代码中使用我想要的逻辑，但我无法将名称附加在彼此下面。以下是我认为该功能应该可以正常工作的内容。[图片][1]。单击下拉列表中的John可在下面添加John（也可将其存储在数组中）并将其从下拉列表中删除。从下面删除后，将其添加回下拉列表。[1 ]:

<select ng-model="selectname1" multiple
    ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select -</option></select>
   <div>{{selectname1}}</div>