How to display multiple values from JavaScript array
Question
my array has 2 elements. I'm creating a dynamic list using the "Name" and displaying the "Location" while submitting. But I also want to display the "ID" while submitting.
JS Code create a dynamic list using Name - ITC, JOY When I chose ITC , I want to display India and 100 . But this code only allow me to choose single value from the array .
<!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>
3 answers
solution1
0 2020-04-07 10:09:16
You can get the selected index of the by using its selectedIndex property that way you can dynamically display your values based on user input. I've also added in the 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>
solution2
0 ACCPTED 2020-04-07 10:10:52
I think this is what you're looking for. What I did is I stored an Object with the Location and ID in the value attribute and accessed it when it was selected. There are many ways to do this though. Also I changed the for loop for better abstraction.
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>
solution3
0 2020-04-07 10:16:11
document.getElementById("display_message2").innerHTML=Comp[AllCustomers.selectedIndex].ID;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.