通過選擇下拉選擇const

我正在尋找一種解決方案，通過選擇下拉選單選擇不同的 const 以顯示在表格中。

誰能指出我正確的方向？謝謝。

<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"]

按選項值選擇 const 的功能？

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

我已經嘗試過上述方法，但無法使其正常作業。

uj5u.com熱心網友回復：

您將希望使用物件而不是陣列并將事件偵聽器附加到選擇。

物件允許您使用非數字和更動態的鍵。

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>

uj5u.com熱心網友回復：

1. 將您的資料置于與您的選擇程序相關的結構中。在這里，我使用了一個物件陣列。如果您希望通過鍵而不是數字索引來檢索設備資料，也可以使用包含物件的物件作為屬性。
2. 為選擇元素添加一個事件監聽器。
3. 按索引使用資料更新 DOM。

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>

uj5u.com熱心網友回復：

你為什么不嘗試一個 assoc 陣列？

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

標籤：javascript选择常数getelementbyid

上一篇：如何將Url值獲取到javascript變數？

下一篇：如何在ReactJS中創建日期陣列