Select const by select drop down

Question

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.

Does this answer your question? ["Variable" variables in JavaScript](https://stackoverflow.com/questions/5187530/variable-variables-in-javascript) — pilchard, Nov 07 '22 at 22:28
Where is this "Name" element? `getElementById("Name")` I see no markup with that id - same for the others. — Mark Schultheiss, Nov 07 '22 at 22:35

score 1 · Answer 1 · answered Nov 07 '22 at 22:36

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>

You're welcome. Please take the [tour] to learn how to respond to answers. "Thanks" comments are discouraged. — isherwood, Nov 09 '22 at 16:12
Also, you have questions posed in comments on your original post to which you haven't responded. Please do. — isherwood, Nov 09 '22 at 16:13

score 0 · Answer 2 · answered Nov 07 '22 at 22:36

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>

score -1 · Answer 3 · answered Nov 07 '22 at 22:35

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);

Select const by select drop down

3 Answers3