Select const by select drop down-CodePudding

I am looking for a solution to select different const via select dropdown menu to be shown in a table.

Anyone able to point me in the right direction? Thanks.

<select id="select" name="select"\>
<option value="1"\>Device 1\</option\>
<option value="2"\>Device 2\</option\>
<option value="3"\>Device 3\</option\>
</select\>

const 1 = [Name: "Name 1", Code: "Code 1", Speed: "10"]
const 2 = [Name: "Name 2", Code: "Code 2", Speed: "20"]
const 3 = [Name: "Name 3", Code: "Code 3", Speed: "30"]

Function to select const by option value?

var text = selected option value
document.getElementById("Name").innerHTML = text.Name;
document.getElementById("Code").innerHTML = text.Code;
document.getElementById("Speed").innerHTML = text.Speed;

 -------------------------------- 
| Name:   | Selected const Name  |
|---------|----------------------|
| Code:   | Selected const Code  |
|---------|----------------------|
| Speed:  | Selected const Speed |
 --------------------------------

I've tried to above method by cant get it to work.

CodePudding user response：

You will want to use objects not arrays and attach an event listener to the select.

Objects allow you to use non numerical and more dynamic keys.

let device = document.querySelector("#select");

let devices = {
  "1": {
    Name: "Name 1",
    Code: "Code 1",
    Speed: "10"
  },
  "2": {
    Name: "Name 2",
    Code: "Code 2",
    Speed: "20"
  },
  "3": {
    Name: "Name 3",
    Code: "Code 3",
    Speed: "30"
  }
};

device.addEventListener("change", function() {
  let deviceID = this.value;
  let selDevice = devices[deviceID];
  if (selDevice) {
    document.getElementById("Name").innerHTML = selDevice.Name;
    document.getElementById("Code").innerHTML = selDevice.Code;
    document.getElementById("Speed").innerHTML = selDevice.Speed;
  }
});

<select id="select" name="select">
  <option value="">Select a device</option>
  <option value="1">Device 1</option>
  <option value="2">Device 2</option>
  <option value="3">Device 3</option>
</select>

<div id="Name"></div>
<div id="Code"></div>
<div id="Speed"></div>

CodePudding user response：

Put your data in a structure that correlates to your selection process. Here I'm using an array of objects. You could also use an object containing objects as properties if you prefer to retrieve the device data by key instead of numerical index.
Add an event listener for the select element.
Update the DOM with the data by index.

const deviceData = [{
  Name: "Name 1",
  Code: "Code 1",
  Speed: "10"
}, {
  Name: "Name 2",
  Code: "Code 2",
  Speed: "20"
}, {
  Name: "Name 3",
  Code: "Code 3",
  Speed: "30"
}];

document.querySelector('#select').addEventListener('change', event => {
  // zero-based index requires deducting 1 from the option value
  const user = deviceData[event.currentTarget.value - 1];

  document.getElementById("Name").innerHTML = user.Name;
  document.getElementById("Code").innerHTML = user.Code;
  document.getElementById("Speed").innerHTML = user.Speed;
});

<select id="select" name="select">
  <option>Select a device</option>
  <option value="1">Device 1</option>
  <option value="2">Device 2</option>
  <option value="3">Device 3</option>
</select>

<div id="Name"></div>
<div id="Code"></div>
<div id="Speed"></div>

CodePudding user response：

Why don'T you try an assoc array?

    const array = {
     "1" : {Name: "Name 1", Code: "Code 1", Speed: "10"},
     "2" : {Name: "Name 2", Code: "Code 2", Speed: "20"},
     "3" : {Name: "Name 3", Code: "Code 3", Speed: "30"}
    }
    Console.log(array[1].Name);