如何顯示 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