如何显示 JavaScript 数组中的多个值

Question

我的数组有 2 个元素。 我正在使用“名称”创建一个动态列表，并在提交时显示“位置”。 但我也想在提交时显示“ID”。

JS 代码使用Name - ITC, JOY创建一个动态列表当我选择ITC时，我想显示India和100 。 但是这段代码只允许我从数组中选择单个值。

<!DOCTYPE html>
<html>
<body>
<head>
<script language="JavaScript">

var Comp = [
{Name: "ITC"    , Location: "India ", ID:   "100"   },
{Name: "JOY"    , Location: "US "   ,ID:    "200"  },
];
var AllCustomers = document.getElementById("AllCustomers");

for (var i = 0; i < Comp.length; i++) {
             var My_list = document.createElement("OPTION");                      
             My_list.innerHTML = Comp[i].Name;
             My_list.value = Comp[i].Location;
             AllCustomers.appendChild(My_list)

}
function ShowCX()
{
          document.getElementById("display_message").innerHTML=AllCustomers.value;
          document.getElementById("display_message2").innerHTML=AllCustomers.value;

}

</script>
</head>
<select id="AllCustomers">
    </select>

<input type="button" onclick="ShowCX()" value="submit" />


<p> Location:  <span id = "display_message"></span> </p>
<p> ID:  <span id = "display_message2"></span> </p>
</body>

</html>

Answer 1

您可以使用其 selectedIndex 属性获取选定的索引，这样您就可以根据用户输入动态显示您的值。 我还添加了id。

<!DOCTYPE html>
<html>
<head></head>

<body>
    <select id="AllCustomers"></select>
    <input type="button" onclick="ShowCX()" value="submit" />
    <p> Location: <span id="display_message"></span> </p>
    <p> ID: <span id="display_message2"></span> </p>

    <script language="JavaScript">

    var Comp = [
        { Name: "ITC", Location: "India ", ID: "100" },
        { Name: "JOY", Location: "US ", ID: "200" },
    ];
    var AllCustomers = document.getElementById("AllCustomers");

    for (var i = 0; i < Comp.length; i++) {
        var My_list = document.createElement("OPTION");
        My_list.innerHTML = Comp[i].Name;
        My_list.value = Comp[i].Location;
        My_list.id = Comp[i].ID;
        AllCustomers.appendChild(My_list)

    }
    function ShowCX() {
        var selectedIndex = document.getElementById("AllCustomers").selectedIndex
        document.getElementById("display_message").innerHTML = AllCustomers[selectedIndex].value; document.getElementById("display_message2").innerHTML = AllCustomers[selectedIndex].value;
        document.getElementById("display_message2").innerHTML = AllCustomers[selectedIndex].value; document.getElementById("display_message2").innerHTML = AllCustomers[selectedIndex].id;
    }
    </script>
</body>

</html>

Answer 2

我想这就是你要找的。 我所做的是我在 value 属性中存储了一个带有 Location 和 ID 的 Object 并在选择它时访问它。 不过有很多方法可以做到这一点。 我还更改了 for 循环以获得更好的抽象。

 var Comp = [{ Name: "ITC", Location: "India ", ID: "100" }, { Name: "JOY", Location: "US ", ID: "200" }, ]; var AllCustomers = document.getElementById("AllCustomers"); /*for (var i = 0; i < Comp.length; i++) { var My_list = document.createElement("OPTION"); My_list.innerHTML = Comp[i].Name; My_list.value = Comp[i].Location; AllCustomers.appendChild(My_list) }*/ Comp.forEach(element=>{ var My_list = document.createElement("OPTION"); My_list.innerHTML = element.Name; My_list.value = JSON.stringify({"loc":element.Location,"id":element.ID});//storing as a JSON in value attribute AllCustomers.appendChild(My_list) }) function ShowCX() { value = JSON.parse(AllCustomers.value); //gettinng the JSON document.getElementById("display_message").innerHTML = value.loc; document.getElementById("display_message2").innerHTML = value.id; }

 <:DOCTYPE html> <html> <body> <head> </head> <select id="AllCustomers"> </select> <input type="button" onclick="ShowCX()" value="submit" /> <p> Location: <span id="display_message"></span> </p> <p> ID: <span id="display_message2"></span> </p> </body> </html>

Answer 3

document.getElementById("display_message2").innerHTML=Comp[AllCustomers.selectedIndex].ID;

如何显示 JavaScript 数组中的多个值

问题描述

3 个解决方案

解决方案1
0 2020-04-07 10:09:16

解决方案2
0 已采纳 2020-04-07 10:10:52

解决方案3
0 2020-04-07 10:16:11

如何显示 JavaScript 数组中的多个值

问题描述

3 个解决方案

解决方案1 0 2020-04-07 10:09:16

解决方案2 0 已采纳 2020-04-07 10:10:52

解决方案3 0 2020-04-07 10:16:11

解决方案1
0 2020-04-07 10:09:16

解决方案2
0 已采纳 2020-04-07 10:10:52

解决方案3
0 2020-04-07 10:16:11