如何在javascript中显示下拉菜单答案

【问题标题】：how to display dropdown in javascript如何在javascript中显示下拉菜单
【发布时间】：2021-07-04 05:45:15
【问题描述】：

我正在尝试显示一个下拉列表 - 在下拉列表中我正在显示一些处于选定状态的项目，其余的应该显示在 dropdwon 中。

下面是我需要在选定状态下显示的代码和数组

var arr1 = [ 
        {id: 2, name: "name2"},
        {id: 3, name: "name3"},
        {id: 4, name: "name4"},
        {id: 5, name: "name5"}
    ];

var arr2 = [
        {id: 2, name: "name2" },
        {id: 3, name: "name3" },
    ];


$('#DropDown').html('');
let html = '<select id="selected"  name="selected[]"  multiple>';
for (let x = 0; x < arr1.length; x++) {
  for (let j = 0; j < arr2.length; j++) {
    let selected = "";
    if (arr2[j].id === arr1[x].id) {
      selected = "selected";
    }
    html = html + ' <option  value="' + arr1[x].id + '"' + selected + '>' +
      arr1[x].name + '</option>';
  }
}
html = html + '</select>';
$('#DropDown').append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DropDown"></div>

在输出中，我想在下拉列表中显示所有 arr1 项目，并在选定状态下显示 arr2 元素。

【问题讨论】：

你必须达到什么目标？？它的工作
我已将您的代码原样转换为带有 implied HTML 的 sn-p。请更新以显示问题，并请包含预期结果，因为它似乎正在工作，尽管多次添加所有项目。
在下拉项目中重复显示。这就是我面临的问题
在输出中，我想在下拉列表中显示所有 arr1 项目，并在选定状态下显示 arr2 元素

标签： javascript jquery json select drop-down-menu

【解决方案1】：

问题是您在 arr2 的 for 循环中添加选项。

var arr1 = [ 
        {id: 2, name: "name2"},
        {id: 3, name: "name3"},
        {id: 4, name: "name4"},
        {id: 5, name: "name5"}
    ];

var arr2 = [
        {id: 2, name: "name2" },
        {id: 3, name: "name3" },
    ];


$('#DropDown').html('');
        let html = '<select id="selected"  name="selected[]"  multiple>';
        for (let x = 0; x < arr1.length; x++) {
            let selected = "";
            let arr1Id = arr1[x].id;
            let arr1Name = arr1[x].name;
            for (let j = 0; j < arr2.length; j++) {
               if (arr2[j].id === arr1[x].id) {
               selected = "selected";
             }
        }
        html = html + ' <option  value="' + arr1Id + '"' + selected + '>' +arr1Name + 
       '</option>';
    }
html = html + '</select>';
$('#DropDown').append(html);

【讨论】：