Question

这是参考小提琴链接 - ＆gt;＆gt; https://jsfiddle.net/etfLssg4/

正如您在小提琴中看到的，用户可以选择多个下拉项目。初始化期间已选择下拉列表值。 Lisa和Danny是选中的默认项目。它会显示在下拉栏中，如小提琴中所示。

默认值由此行代码设置。

<div class="backdrop">
  <div class="circle">
  </div>
</div>
<em>Feel free to play around with these values:</em><br />
Top margin: <input type="number" id="cngMargin" oninput="setMarginTop(this.value)" value="0"><br />
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="0">

现在的情况如下。后端数据通过字符串传递到前端。它如下

$scope.example13model = [items[2], items[4]];

这意味着大卫和丹尼应该在下拉列表中显示。目前是“Lisa，Danny”

继续解释这应该如何发生。一旦我们从服务器端获得David，Danny，它将与项目列表进行比较。从该列表中可以看出，大卫排名第0，丹尼排名第4。

列表如下。（如小提琴所示）

David,Danny

一旦知道了数字，代码就会显示这行代码选择的项目列表。

var items = [{
    id: 1,
    label: "David"
}, {
    id: 2,
    label: "Jhon"
}, {
    id: 3,
    label: "Lisa"
}, {
    id: 4,
    label: "Nicole"
}, {
    id: 5,
    label: "Danny"
}];

有人可以让我知道如何动态实现这一目标。例如。如果后端的字符串只包含'lisa'，它应该在下拉列表中显示Lisa。

如果从后端传递3个名称作为字符串，它应该能够在下拉列表中显示这3个名称。

如何传递后端数据以显示为多选下拉项（附有Jsfiddle）

1 个答案: